Glassmorphism CSS Generator
Generate frosted-glass CSS with backdrop-filter blur and saturation, tint color and opacity, border and shadow, including the -webkit- prefix for Safari.
Presets
Glass settings
Preview settings
Preview
background: rgba(255, 255, 255, 0.25); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); -webkit-backdrop-filter: blur(10px) saturate(180%); backdrop-filter: blur(10px) saturate(180%);
Related Tools
View AllWhat is Glassmorphism Generator?
Creates the frosted-glass (glassmorphism) effect: a translucent tinted panel that blurs and saturates whatever is behind it, with an optional light border and soft shadow. The preview places the card over colourful backdrops so you can judge the effect.
How to use Glassmorphism Generator
- Pick a preset: Frosted, Dark glass, Tinted or Subtle.
- Adjust Blur and Backdrop saturation.
- Choose the Tint color and Tint opacity, the Border opacity and the Radius.
- Toggle Drop shadow and try different Backdrops in Preview settings.
- Copy the CSS code.
Example
Frosted preset (blur 10px, saturation 180%, white at 0.25, border 0.3, radius 16px, shadow on)
background: rgba(255, 255, 255, 0.25); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); -webkit-backdrop-filter: blur(10px) saturate(180%); backdrop-filter: blur(10px) saturate(180%);
When to use Glassmorphism Generator
Use it for cards, navigation bars and modals placed over images or colourful gradients. The effect only shows if there is something visible behind the element; over a flat colour it looks like a plain translucent box. Check text contrast, because the background behind glass changes.
How Glassmorphism Generator works
The panel background is the tint colour at the chosen opacity (rgba()), and the border uses the same colour at the border opacity. The blur and saturation go into backdrop-filter: blur(px) saturate(%); saturate(100%) is omitted because it changes nothing. The declaration is written twice, first with the -webkit- prefix that Safari still needs, then unprefixed. If blur is 0 and saturation 100% no backdrop-filter is written at all.
Common Use Cases
- Frosted navigation bars over hero images
- Glass cards on mesh-gradient backgrounds
- Modal dialogs that keep context visible
- Music or weather widgets
- Dark glass overlays for video controls
FAQs
Why is -webkit-backdrop-filter included?
Safari shipped backdrop-filter only with the -webkit- prefix for many years, and older iOS versions still require it. Keeping both lines covers all current browsers.
Why do I not see any blur?
backdrop-filter blurs what is behind the element. If the element sits on a solid colour, there is nothing to blur; place it over an image or gradient.
Is backdrop-filter expensive?
It requires the browser to re-render the area behind the element, so avoid very large blurred areas and many overlapping glass layers on low-end devices.