Glassmorphism CSS Generator — Frosted Glass Cards
Tune transparency, blur, saturation, border and radius on a live frosted-glass card, and copy the CSS — Safari prefix included.
🔒 Runs in your browser — files never uploaded ⚡ No signup 💯 Free
Design a glassmorphism card — the frosted-glass panel over a colourful background that defines the style — with sliders for transparency, background blur, saturation, the hairline border and corner radius, and see it live. The CSS uses backdrop-filter with the -webkit- prefix Safari still requires, a translucent fill and a soft shadow.
How to use Glassmorphism Generator
- Move the sliders and watch the card. Swap the preview background to check the effect over different colours.
- Tint the glass for a coloured variant; keep it white for the classic look.
- Copy the CSS and apply the class to a panel that sits over an image or gradient.
What makes the glass effect
Four ingredients: a semi-transparent fill (white at 10–30% opacity), a backdrop-filter: blur() that blurs whatever is behind the element, a one-pixel border in semi-transparent white that catches a highlight along the edge, and a soft drop shadow that lifts the panel off the background. A touch of saturate() in the backdrop filter makes the colours behind glow through, which is what separates a good glass card from a grey smear.
It needs something behind it
The effect is entirely about the backdrop. Over a flat colour, glass looks like a lighter flat colour. Put the card over a gradient, a photo or a few blurred colour blobs — as the preview does — and it reads instantly. Text on the glass should be high-contrast; light text on a light glass over a bright image is the classic legibility failure.
Browser support and performance
backdrop-filter is supported everywhere current, but Safari needs the -webkit-backdrop-filter prefix, which is included. Blur is expensive to render: one or two glass panels are fine, a page full of them with large blur radii scrolls badly on older phones. Keep the blur under about 20px and the number of panels small, and avoid animating the blur.
Pair with the gradient generator for the background and the border-radius generator for the corners.
Frequently asked questions
Why does the effect not show on my page?
There is nothing behind the element to blur. Glass needs a background — a gradient, an image, coloured shapes — behind the panel, and the panel must have a transparent fill. A solid background colour on the panel hides the effect completely.
Does it work in Safari?
Yes, with the -webkit-backdrop-filter prefix, which the generated CSS includes alongside the unprefixed property.
Is backdrop-filter slow?
Blur is one of the more expensive effects to render. One or two panels with blur under about 20px are fine everywhere; many panels, huge blur radii or animating the blur can make scrolling stutter on older phones.
How do I keep text readable on glass?
Use high-contrast text (white on a darkish backdrop or dark on a light one), keep transparency moderate so the fill provides some contrast, and avoid busy images directly behind text. Check with the contrast checker.
What is the difference from neumorphism?
Glassmorphism is a translucent, blurred panel floating over a colourful background. Neumorphism is a soft, opaque surface with inner and outer shadows that looks extruded from the page. They are different styles; glass depends on the backdrop, neumorphism on the shadows.