Glassmorphism CSS Generator
Build a frosted glass card over a real background, with the readable fallback and the Safari prefix written for you.
Enable JavaScript to change the glass; the CSS below is for the defaults.
How much of the background is smeared. Past about 20px the background stops being recognisable.
Over 100 puts the colour back that blurring takes out. Left at 100 it is not written at all.
White over a dark photo, a dark colour over a light one.
The whole effect lives between about 10 and 30 percent.
The edge highlight. Without it the card reads as a flat overlay rather than glass.
Lifts the card off the background. The offset is a quarter of the blur.
Glass only exists in relation to what is behind it, so judge it over something busy.
Frosted glass
Blur only exists in relation to what is behind it, so judge it here.
.glass-card {
background-color: rgb(255 255 255 / 0.7);
border: 1px solid rgb(255 255 255 / 0.35);
border-radius: 16px;
box-shadow: 0 8px 32px rgb(11 16 32 / 0.18);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
.glass-card {
background-color: rgb(255 255 255 / 0.18);
-webkit-backdrop-filter: blur(12px) saturate(140%);
backdrop-filter: blur(12px) saturate(140%);
}
}Build a frosted glass panel over something busy, because that is the only place the effect exists, and copy the CSS with its fallback.
How to use
- Set the blur first, over the busy preview background. Between 8 and 16 pixels is where glass reads as glass; past 20 the background stops being recognisable.
- Add saturation. Blurring drains colour, and 120 to 160 percent puts it back.
- Set the tint and its opacity. White over a dark background, a dark colour over a light one, and 10 to 30 percent opacity either way.
- Keep the border. The edge highlight is what separates glass from a flat overlay, and one pixel at about a third opacity is enough.
- Copy the CSS. The plain rule is the readable fallback; the feature query adds the blur where it is supported, with the Safari prefix.
Example
.glass-card {
background-color: rgb(255 255 255 / 0.7);
border: 1px solid rgb(255 255 255 / 0.35);
border-radius: 16px;
box-shadow: 0 8px 32px rgb(11 16 32 / 0.18);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
.glass-card {
background-color: rgb(255 255 255 / 0.18);
-webkit-backdrop-filter: blur(12px) saturate(140%);
backdrop-filter: blur(12px) saturate(140%);
}
}The order matters. Without the blur, an 18 percent white background over a photo is unreadable, so the plain rule uses 70 percent and the query drops it to 18 once there is a blur doing the work.
Pitfalls
backdrop-filterblurs what is behind the element, and it needs something there. Over a flat background colour it does nothing visible.- The element must be translucent. A fully opaque background hides the blur completely, which is the usual reason it “does not work”.
- It is expensive to paint. A blurred panel over a scrolling page is one of the fastest ways to lose frames on a mid-range phone; over a static hero it is fine.
- A blurred parent creates a containing block for fixed positioning, the same way a transform does. A fixed child inside a glass card will position against the card.
- Text over glass still needs contrast. The blur reduces the variation behind the text but not its average brightness, so check the ratio against the tint.
- Safari needed
-webkit-backdrop-filteruntil 15.4 and still accepts it. The feature query has to ask for either, or Safari takes the fallback it does not need. - Nesting glass inside glass compounds the blur and the cost, and reads as fog. One layer is the effect; two is a mistake.
- Firefox only enabled it by default in 103. Anything older gets the fallback, which is why the fallback has to be a design rather than an afterthought.
Compatibility
backdrop-filter is supported in Chrome 76, Safari 9 with the prefix and 15.4 unprefixed, and Firefox 103. The feature query asks for either spelling, so a browser without it takes the opaque fallback and everything stays readable. rgb() with a slash alpha needs Chrome 65, Firefox 52 or Safari 12.1; replace it with rgba() for anything older. The tool runs entirely in your browser.
Frequently asked questions
Why is nothing blurring?
Does it work in Safari?
-webkit-backdrop-filter, which the generated CSS includes.