Create frosted-glass UI effects with adjustable blur, transparency, and border.
Set the backdrop blur intensity for the glass effect.
Adjust the background opacity and border settings.
See the glassmorphism effect applied to a sample card.
Click copy to grab the CSS for your glassmorphism design.
A slider-driven generator that turns a handful of settings into a ready-to-paste CSS block for frosted-glass elements: a semi-transparent fill, a backdrop blur that frosts whatever sits behind the element, a hairline border, and a soft shadow. You adjust blur radius, fill transparency, border weight, and corner rounding, and it emits the declarations, WebKit prefix included for Safari. What surprises most users: the frost is only visible when there is something detailed behind the panel. Over a flat background, a glass panel is just a translucent rectangle; the effect lives entirely in what it covers.
A concrete input and expected output from the current implementation.
Input
Fill: white at 25% opacity. Blur: 10px. Border: 1px, white at 30% opacity. Corner radius: 12px.
Expected output
.glass {
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.30);
border-radius: 12px;
} Each opacity percentage is written directly as the alpha channel of an rgba() color (25% becomes 0.25, 30% becomes 0.30), the blur radius is copied into the backdrop-filter value, and the -webkit- prefixed line is emitted alongside for Safari, so every number in the output follows from the settings you entered.
Each opacity setting is expressed as a percentage and written into the alpha channel of an rgba() color: 25% becomes 0.25. Because the fill and border default to white, the conversion is direct, and the digits in the emitted CSS match the slider positions you set, so the code stays readable and tunable by hand afterward.
The signature property is backdrop-filter: blur(Npx), which samples what is painted behind the element and softens it, while filter: blur() would soften the element itself. The generator emits the declaration twice, once unprefixed and once with the -webkit- prefix, because Safari and iOS honor only the prefixed form; the semi-transparent fill also keeps the panel visible where backdrop-filter is unsupported.
The backdrop behind it is flat. backdrop-filter only frosts content painted behind the element, so a solid color or empty page leaves no detail to blur. Put a photo, gradient, or busy UI behind the panel and the frosted effect appears. This is the most common misjudgement with this kind of generator.
No. Safari and iOS need the -webkit- prefixed declaration, which the generator includes; Firefox 103 and later support the unprefixed form; and browsers without backdrop-filter support ignore both and show a plain translucent rectangle. The semi-transparent fill keeps the panel usable, but it will not look like glass in older browsers.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Pick colors visually and convert between HEX, RGB, HSL, and CMYK formats.
Preview how screen colors translate to print with CMYK simulation and proofing.
Preview any Google Font at various sizes, weights, and with custom sample text.
Create linear, radial, and conic CSS gradients with a visual editor and code output.
Generate harmonious color palettes from a base color using color theory rules.
Simulate how colors appear to people with various types of color vision deficiency.