Glassmorphism Builder

Tune blur, opacity, saturation and border tint on a translucent panel and watch the edge quality change over the backdrop.

Design & colourCssGlassBackdrop
Glassmorphism Builder screenshot
Glass surface
16px
160%
0.10
0.35
1px
24px
24px
Tint

Backdrop

Frosted card

The blur picks up whatever sits behind it. Move the sliders and watch the edge quality change.

Emitted CSS

      

backdrop-filter needs a translucent surface to show anything — drop the alpha to 0 and the card disappears, which is exactly what happens in a real browser.

More tools