Why use this tool?
- Compare blur and tint against different backdrops.
- Tune the panel edge, radius, and shadow in a single preview.
- Copy both the effect and a fallback for browsers without backdrop-filter support.
Glassmorphism Generator
Create frosted glass CSS with backdrop blur, tint, opacity, borders, and shadows. Preview different backgrounds and copy CSS with a browser fallback.
Runs locally in your browser
Preview
Frosted panel
Glass surface
Everything behind this panel is blurred and re-saturated by the compositor, so the color underneath still shows through.
PrimarySecondary
Estimated text contrast
3.56:1
Only safe for large text. Raise the tint opacity, or darken the backdrop.
This is an estimate against the average color of the selected backdrop. A real page scrolls, so check the lightest and darkest content that can pass behind the panel.
Generated code
.glass {
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 18px;
box-shadow: 0 8px 32px 0 rgba(15, 23, 42, 0.3);
}Glass
Tint
Saturation 0 percent, brightness 100 percent, hue 0 degrees.
Border
Saturation 0 percent, brightness 100 percent, hue 0 degrees.
Text
Text color
Complete tool guide
Glassmorphism Generator guide
Create a frosted-glass CSS panel by combining a translucent tint with backdrop-filter blur and saturation. Preview the panel over several backgrounds, tune its border and shadow, and export a CSS rule with an optional stronger-background fallback.
Your input is processed in the current browser tab and is not sent to the application server.
Common use cases
- Navigation bars and headers that sit over scrolling content
- Modal, sheet, and card surfaces over a photographic background
- Media controls and overlays on top of video
- Notification and toast surfaces that need to feel light
How to use it
- 1
Choose a backdrop that resembles what your panel will sit over.
- 2
Set the blur and saturation until the panel reads as glass, not fog.
- 3
Adjust the tint opacity, border, radius, and shadow.
- 4
Copy the version with the @supports fallback for production.
Controls and results explained
Blur and saturation
Blur averages detail behind the panel; saturation changes the intensity of backdrop colors. Neither setting determines text contrast by itself.
Tint and opacity
The background tint overlays the backdrop. A higher alpha hides more of the underlying image, which can make text easier to read.
Contrast estimate
The estimate composites the tint over a representative average backdrop color. It is a rough check, not the minimum contrast across the full panel.
Worked examples
Create a frosted backdrop filter
Start with: Blur 16px and saturation 150%
- Set blur to 16px and saturation to 150%.
- Use a translucent tint and inspect the CSS output.
backdrop-filter: blur(16px) saturate(150%);
-webkit-backdrop-filter: blur(16px) saturate(150%);These declarations are part of the full panel rule. A visible backdrop and translucent background are needed to see the effect.
Prepare a stronger fallback background
Start with: White tint at 20% opacity
- Set tint to white and alpha to 20%.
- Choose With fallback and inspect the base background declaration.
background: rgba(255, 255, 255, 0.85);Outside @supports, the exporter raises alpha to 0.85. The supported rule restores the selected 0.2 alpha and filter. Test text against both appearances.
Backdrop filter versus filter
backdrop-filter affects content behind the panel. filter: blur() blurs the element itself, including its children, so it is not a direct substitute.
Fallback output
The With fallback tab raises tint alpha to at least 0.85 outside an @supports rule. It is more opaque, not necessarily fully opaque; check the result without filter support.
Rendering cost
Large blurred areas and changing backdrops can increase rendering work. Test scrolling and animation on representative devices rather than assuming every panel has the same cost.
Practical tips for better results
- Use a backdrop with visible detail while tuning blur; a flat color may show little change.
- Check the weakest text-background region, especially when the backdrop scrolls.
- Raise tint opacity or add a solid text surface when the background is too variable.
Frequently asked questions
Why is backdrop-filter not visibly blurring?
Check that there is detailed content behind the panel and that its own background is translucent. Browser support and backdrop-root boundaries can also affect what gets filtered.
Is the displayed contrast estimate a WCAG pass?
No. It uses an average backdrop color, so bright or dark local regions can have worse contrast than the estimate. Inspect the actual text area over all expected backgrounds.
Can I use glassmorphism without a background image?
Yes. A gradient or other content behind the panel can create visible variation. Over a uniform color, blur itself may make little visible difference.
What to check before using the result
- The generated rule does not include every possible background or scrolling state.
- The fallback remains translucent when the selected tint alpha is below 0.85, so it still needs a contrast review.
References and further reading
Keep working
Related color & design
Continue with another focused tool from the same collection.
CSS Gradient GeneratorBuild linear, radial, and conic gradients with draggable multi-stop control.CSS Box Shadow GeneratorStack multiple shadow layers and drag the light direction on a live preview.CSS Text Shadow GeneratorLayer text shadows for glow, outline, letterpress, and long-shadow effects.CSS Border Radius GeneratorDrag handles to shape corners, from rounded boxes to organic blob shapes.