Back to gallery

Glass CSS Effects

Glass CSS effects collect presets that share the same visual role across CSS Forge. This page includes 40 presets spanning shadows, clipped shapes, translucent glass panels, and gradients when those tools use glass as a meaningful style signal. The purpose of a tag page is comparison: you can scan several implementation styles side by side, then open the preset that best matches the interface you are building. A glass treatment can describe color, depth, geometry, mood, or layout behavior depending on the tool. For example, a shadow preset may use the tag to describe elevation or tint, while a gradient preset may use it to describe its dominant color movement. Each card links to a dedicated preset page with copy-ready CSS and a path back to the generator, so the gallery remains useful both for browsing and for implementation.

Related tools

Box Shadow Clip Path Glassmorphism Gradient

Related tags

Colored Subtle Light Card Panel Deep Blur

Frost Card

Frost Card is a clear frosted white surface with 18px backdrop blur.

Frost Panel

Frost Panel is a clear frosted white surface with 24px backdrop blur.

lightfrostpanel

Frost Sheet

Frost Sheet is a clear frosted white surface with 30px backdrop blur.

lightfrostsheet

Frost Pill

Frost Pill is a clear frosted white surface with 16px backdrop blur.

Mist Card

Mist Card is a cool blue-tinted glass layer with 18px backdrop blur.

Mist Panel

Mist Panel is a cool blue-tinted glass layer with 24px backdrop blur.

Mist Sheet

Mist Sheet is a cool blue-tinted glass layer with 30px backdrop blur.

Mist Pill

Mist Pill is a cool blue-tinted glass layer with 16px backdrop blur.

Graphite Card

Graphite Card is a dark translucent graphite pane with 18px backdrop blur.

darkdashboardcard

Graphite Panel

Graphite Panel is a dark translucent graphite pane with 24px backdrop blur.

darkdashboardpanel

Graphite Sheet

Graphite Sheet is a dark translucent graphite pane with 30px backdrop blur.

darkdashboardsheet

Graphite Pill

Graphite Pill is a dark translucent graphite pane with 16px backdrop blur.

darkdashboardpill

Teal Card

Teal Card is a brand-friendly teal glass surface with 18px backdrop blur.

tealcoloredcard

Teal Panel

Teal Panel is a brand-friendly teal glass surface with 24px backdrop blur.

tealcoloredpanel

Teal Sheet

Teal Sheet is a brand-friendly teal glass surface with 30px backdrop blur.

tealcoloredsheet

Teal Pill

Teal Pill is a brand-friendly teal glass surface with 16px backdrop blur.

tealcoloredpill

Violet Card

Violet Card is a violet wash for expressive panels with 18px backdrop blur.

violetcoloredcard

Violet Panel

Violet Panel is a violet wash for expressive panels with 24px backdrop blur.

violetcoloredpanel

Violet Sheet

Violet Sheet is a violet wash for expressive panels with 30px backdrop blur.

violetcoloredsheet

Violet Pill

Violet Pill is a violet wash for expressive panels with 16px backdrop blur.

violetcoloredpill

Amber Card

Amber Card is a warm amber tint for highlight cards with 18px backdrop blur.

warmcoloredcard

Amber Panel

Amber Panel is a warm amber tint for highlight cards with 24px backdrop blur.

warmcoloredpanel

Amber Sheet

Amber Sheet is a warm amber tint for highlight cards with 30px backdrop blur.

warmcoloredsheet

Amber Pill

Amber Pill is a warm amber tint for highlight cards with 16px backdrop blur.

warmcoloredpill

Rose Card

Rose Card is a rose-tinted glass style for accents with 18px backdrop blur.

rosecoloredcard

Rose Panel

Rose Panel is a rose-tinted glass style for accents with 24px backdrop blur.

rosecoloredpanel

Rose Sheet

Rose Sheet is a rose-tinted glass style for accents with 30px backdrop blur.

rosecoloredsheet

Rose Pill

Rose Pill is a rose-tinted glass style for accents with 16px backdrop blur.

rosecoloredpill

Slate Card

Slate Card is a neutral smoked-glass treatment with 18px backdrop blur.

darkneutralcard

Slate Panel

Slate Panel is a neutral smoked-glass treatment with 24px backdrop blur.

darkneutralpanel

Slate Sheet

Slate Sheet is a neutral smoked-glass treatment with 30px backdrop blur.

darkneutralsheet

Slate Pill

Slate Pill is a neutral smoked-glass treatment with 16px backdrop blur.

darkneutralpill

Cyan Card

Cyan Card is a bright cyan panel with crisp edges with 18px backdrop blur.

Cyan Panel

Cyan Panel is a bright cyan panel with crisp edges with 24px backdrop blur.

Cyan Sheet

Cyan Sheet is a bright cyan panel with crisp edges with 30px backdrop blur.

Cyan Pill

Cyan Pill is a bright cyan panel with crisp edges with 16px backdrop blur.

Pearl Card

Pearl Card is a pale pearl surface for quiet UI with 18px backdrop blur.

lightsubtlecard

Pearl Panel

Pearl Panel is a pale pearl surface for quiet UI with 24px backdrop blur.

lightsubtlepanel

Pearl Sheet

Pearl Sheet is a pale pearl surface for quiet UI with 30px backdrop blur.

lightsubtlesheet

Pearl Pill

Pearl Pill is a pale pearl surface for quiet UI with 16px backdrop blur.

lightsubtlepill