CSS Generator
Glassmorphism Generator
Balance background tint, opacity, blur, saturation, borders, radius, and shadow for practical glass UI.
backdrop-filter
Glass Surface
Controls
Output
Copy-ready CSS
Pure CSS
background: rgba(255, 255, 255, 0.14);
backdrop-filter: blur(18px) saturate(150%);
-webkit-backdrop-filter: blur(18px) saturate(150%);
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 24px;
box-shadow: 0 24px 70px -32px rgba(0, 0, 0, 0.28);Tailwind v4
bg-[rgba(255,255,255,0.14)] backdrop-blur-[18px] backdrop-saturate-[150%] rounded-[24px] border border-[rgba(255,255,255,0.28)] shadow-[0_24px_70px_-32px_rgba(0,0,0,0.28)] Presets
Popular Glassmorphism Presets
Start with a tuned pane, then balance opacity and blur against a busy background.
Frost Card
Frost Card is a clear frosted white surface with 18px backdrop blur.
Mist Panel
Mist Panel is a cool blue-tinted glass layer with 24px backdrop blur.
Graphite Card
Graphite Card is a dark translucent graphite pane with 18px backdrop blur.
Teal Panel
Teal Panel is a brand-friendly teal glass surface with 24px backdrop blur.
Violet Sheet
Violet Sheet is a violet wash for expressive panels with 30px backdrop blur.
Amber Card
Amber Card is a warm amber tint for highlight cards with 18px backdrop blur.
Rose Pill
Rose Pill is a rose-tinted glass style for accents with 16px backdrop blur.
Slate Panel
Slate Panel is a neutral smoked-glass treatment with 24px backdrop blur.
Cyan Card
Cyan Card is a bright cyan panel with crisp edges with 18px backdrop blur.
Pearl Sheet
Pearl Sheet is a pale pearl surface for quiet UI with 30px backdrop blur.
Graphite Sheet
Graphite Sheet is a dark translucent graphite pane with 30px backdrop blur.
Teal Pill
Teal Pill is a brand-friendly teal glass surface with 16px backdrop blur.
More tools