Glassmorphism Generator

Visual builder for frosted-glass cards. Sliders for blur, opacity, saturation, border — copy CSS or Tailwind.

Frosted

The glass effect previews live.

Tune blur, opacity, and saturation below.

Backdrop
Blur14px
Opacity60%
Saturation140%
Border20%
Radius20px
Tint
CSS
background: rgba(255, 255, 255, 0.60);
backdrop-filter: blur(14px) saturate(1.40);
-webkit-backdrop-filter: blur(14px) saturate(1.40);
border: 1px solid rgba(255, 255, 255, 0.20);
border-radius: 20px;
Tailwind
bg-[rgba(255,255,255,0.60)] backdrop-blur-[14px] backdrop-saturate-[140%] border border-white/[0.20] rounded-[20px]

01 — Overview

How the Glassmorphism Generator works

A live workbench for glassmorphism. Adjust backdrop blur, background opacity, saturation, border, and corner radius and see the result on a sample card over a colorful backdrop. Export as CSS or Tailwind classes.

02 — Use cases

When to use the Glassmorphism Generator

  1. 01

    Build a glass nav bar that floats over a hero image

  2. 02

    Get the right blur amount for a frosted modal backdrop

  3. 03

    Translate a Figma glass card into production-ready CSS

  4. 04

    Test how a glass treatment reads in light and dark mode

03 — Examples

Glassmorphism Generator examples

blur 12px, opacity 60%, saturation 140%

ex 01

background: rgba(255,255,255,0.6); backdrop-filter: blur(12px) saturate(1.4);

A typical glass card surface.

tinted glass over dark hero

ex 02

background: rgba(20,20,30,0.5); backdrop-filter: blur(20px) saturate(1.2); border: 1px solid rgba(255,255,255,0.08);

Darker glass with a hairline highlight border for a clear edge.

Tailwind output for a light glass card

ex 03

backdrop-blur-xl bg-white/60 saturate-150 border border-white/20 rounded-2xl

The same treatment expressed in utility classes rather than raw CSS.

frosted modal backdrop

ex 04

background: rgba(10, 10, 12, 0.4); backdrop-filter: blur(24px);

Heavier blur and a dark tint, so the modal content stays the focal point.

04 — FAQ

Glass — frequently asked questions

Why doesn't backdrop-filter work in my browser?

Most evergreen browsers support backdrop-filter, but it requires -webkit-backdrop-filter for Safari. The generated CSS includes the prefix automatically.

Does glassmorphism work over solid backgrounds?

The blur effect only does meaningful work when there's something behind it to blur. Over a flat solid color you'll just see the background tint — pair it with imagery, gradients, or a busy backdrop.

What's a good starting point for blur and opacity?

Try 10–16px blur with 50–70% background opacity. Boosting saturation by 20–40% (saturate(1.2)–saturate(1.4)) keeps colors from going grey.

Why is nothing blurring behind my element?

backdrop-filter blurs whatever is painted behind the element, so the element's own background has to be partially transparent for any of it to show. A solid background:#fff cancels the effect entirely. Start around rgba(255, 255, 255, 0.6) and adjust from there.

Why does the blur spill past the rounded corners in Safari?

Safari needs the -webkit-backdrop-filter prefix, and it clips the backdrop against the element's own border-radius rather than an ancestor's. Set border-radius and overflow: hidden on the same element that carries the backdrop-filter.

Is glassmorphism accessible?

It can be, but contrast becomes a moving target — the text sits over whatever happens to be scrolling underneath. Test against the worst-case backdrop rather than the demo image, and if you can't hold 4.5:1 for body text, put the text on a more opaque inner layer and keep the glass purely decorative.

05 — Reference

Specs and further reading

The primary sources this tool follows. Where behaviour is defined by a specification, we link the specification rather than a summary of it.

07 — More

Tools that pair with Glass

CSS Box Shadow Generator

Build CSS shadows with sliders for offset, blur, spread, color, and opacity. Live preview, multi-shadow stacking, copy as CSS or Tailwind.

Color/box-shadow

CSS Gradient Generator

Build linear and radial gradients visually. Pick stops, angle, and direction; copy as CSS or Tailwind arbitrary value.

Color/gradient
AI

Color Palette Generator

Type a vibe — 'desert at dusk', 'cyberpunk lab' — and get a 5-color palette with hex, RGB, HSL, and OKLCH for every swatch.

Color/palette

Last updated .