Glassmorphism generator
Design the frosted-glass look with live controls for blur, transparency, saturation, border and corner radius, previewed over a colorful background so you can judge readability. Copy cross-browser CSS with the -webkit- prefix included.
Frosted glass CSS with live preview.
How to use the glassmorphism generator
- Choose a tint color for the glass.
- Adjust transparency, blur and saturation.
- Fine-tune the border and corner radius.
- Copy the CSS.
Keep glass readable
Glass only works when the text on it stays legible. Use enough blur to soften what is behind, keep transparency moderate, and check the text contrast — especially over busy or bright backgrounds.
Frequently asked questions
Does backdrop-filter work in all browsers?
It works in all modern browsers; Safari needs the -webkit- prefix, which the generated CSS includes.
Is glassmorphism bad for performance?
Large blurred areas cost some GPU time. Keep blurred regions modest, especially on mobile.