~/css/glassmorphism-generator
CSS Glassmorphism Generator
Create a frosted-glass surface with backdrop-filter: set the blur, the tint colour and its transparency, the border strength and the corner radius, and watch it over a colourful background. The CSS you copy includes a solid fallback for browsers without backdrop-filter.
Glass card
Frosted surface
Text stays readable over a busy background.
Using the CSS Glassmorphism Generator
How the glass effect works
Glassmorphism stacks three things: a semi-transparent fill, a backdrop-filter: blur() that blurs whatever is behind the element, and a thin light border that catches the edge like real glass. The effect only shows when there is something colourful behind it, such as a gradient, a photo or shapes.
Keeping text readable
Blurred, busy backgrounds lower the contrast of text on top of them. Raise the blur and the tint opacity until body text is comfortably readable, and keep important text large and bold. Check it over the brightest and the darkest part of your background.
Browser support and fallbacks
backdrop-filter works in all current major browsers, but older ones ignore it and show only the transparent fill, which can make text unreadable. The generated CSS sets a more opaque background first and switches to the glass version inside an @supports rule.
Saturation makes it feel real
Real frosted glass slightly boosts the colours behind it. Adding saturate() after the blur in backdrop-filter does the same and stops the panel from looking washed out and grey.
Frequently asked questions
Why can I not see the blur?
backdrop-filter blurs what is behind the element. If the background behind it is a flat colour, there is nothing to blur. Put the glass over a gradient, image or shapes.
Is glassmorphism bad for performance?
A few glass panels are fine. Dozens of large blurred layers, or animating them, can slow down low-end phones, so use the effect for a handful of key surfaces.
Does it work on Safari?
Yes. The generated CSS includes the -webkit-backdrop-filter prefix that older Safari versions need.