Build frosted glass panels with backdrop-filter, previewed on real backdrops.
backdrop-filter needs a translucent fill to be visible, and the webkit prefix is still worth shipping for older Safari.
Frosted panel
Glass only reads as glass when there is something behind it to blur.
background: rgba(255, 255, 255, 0.18); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 16px;
Light glass sits on colourful or dark backdrops, dark glass on light ones. Switch between the three backdrops to check the effect holds up on more than one.
Blur is what makes it read as glass, and fill opacity controls how much shows through. Too much opacity and it stops being glass; too little and the text on it becomes unreadable.
The output includes the webkit prefixed property, the translucent background the effect depends on, and the subtle border that gives the panel an edge.
Almost always because the element's background is fully opaque. The filter blurs what is behind the element, so if nothing shows through there is nothing to see. Use a translucent rgba fill.
For older Safari versions, yes, and it costs one extra line. Current browsers all support the unprefixed property.
Blurring alone washes colour out. Pushing saturation above 100 percent puts the vibrancy back and is what separates a convincing frosted panel from a grey smear.
It can be, but it needs care. Text on a translucent panel sits over an unpredictable background, so check the contrast against the lightest and darkest parts of your backdrop, not just the average.
backdrop-filter is expensive because the browser repaints what is behind the element. A few panels are fine; many, or animating one, can cost real frame time on lower-end devices.
A faint light border catches the edge the way real glass does. Without it the panel tends to dissolve into the backdrop and lose its shape.
Yes, and it is one of the best uses for it. A blurred translucent header over scrolling content is the pattern most people recognise from operating system interfaces.
Yes, completely free with no sign-up.
Build layered CSS box shadows with a live preview, then copy them as plain CSS or a Tailwind arbitrary value.
Open ToolCSS gradient generator with Tailwind output. Design linear and radial gradients visually, then copy production-ready CSS or Tailwind classes.
Open ToolDrag the handles to shape a CSS easing curve and watch it animate.
Open Tool