Turning your own numbers into glassmorphism CSS
Glassmorphism layers a translucent panel over blurred content behind it so the surface reads like frosted glass. Enter the fill color and opacity, blur radius, saturation, border, corner radius and shadow values, and this generator returns CSS declarations you can paste straight into a stylesheet. The preview card updates as you type, so you can nudge the numbers until the transparency looks right on your own layout.
Opacity inputs from 0 to 100 percent become a 0 to 1 alpha channel inside rgba(), while blur and saturation are emitted through the backdrop-filter property defined in the W3C Filter Effects specification. Safari engines still need the prefixed -webkit-backdrop-filter, so both lines are always written side by side. That note reflects October 2026, and support can change.
There is no correct set of glassmorphism values, so nothing is recommended and every number comes from your input. The blur stays invisible over a flat solid background, and an ancestor with overflow or filter applied can break the compositing. This tool does not generate gradients. Treat the output as a starting point and confirm it on real devices.
Frequently asked questions
Safari and iOS web views may still ignore the unprefixed backdrop-filter. Keeping both lines means the effect applies on either engine.
backdrop-filter only works when there is content behind the element. Over a flat solid background, or with nothing behind it, the blur is invisible.
Workable glass values shift with the brightness and contrast of whatever sits behind the panel. No recognized reference table exists, so this tool only turns your own numbers into code.