CSS Glassmorphism Formatter🔒 100% local
Generate frosted glass effects. Privacy-first, no server uploads, no tracking.
Builds a frosted-glass card rule from a background colour and a blur. Commas inside parentheses are respected, so 'rgba(255,255,255,0.1), 10px' splits into the right two parts; a bare blur value on its own is also accepted, with a translucent white background filled in. It derives a border colour from the alpha it reads out of the background, adds a fixed radius and shadow, writes both the standard and -webkit- backdrop-filter, and prints a heavier-blur variant of the same rule.
How to use it
- Enter a background and a blur - for example rgba(255,255,255,0.1), 10px - and press Process.
- Read the CSS block: background, both backdrop-filter lines, the derived border, radius and shadow.
- Check the header line, which reports the blur and the background alpha the border was derived from.
- Copy Output takes the HTML snippet, the rule, the blur reference table and the method notes.
Worked example
rgba(255,255,255,0.1), 10pxbecomesCSS:
.glass {
background: rgba(255,255,255,0.1);
backdrop-filter: blur(10px) saturate(180%);
-webkit-backdrop-filter: blur(10px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 16px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
}The default example in the box. Above this block the run prints an HTML snippet and a header line reading 'Glassmorphism card - blur 10px, background alpha 0.10.' (the page uses an em dash there, shown here as a hyphen). The border alpha is the background alpha plus 0.08.
12pxbecomesbackground: rgba(255,255,255,0.1);
backdrop-filter: blur(12px) saturate(180%);A single value starting with a digit is read as the blur, and the background is filled in as translucent white.
#ffffff, 8pxbecomesGlassmorphism card - blur 8px, background alpha 0.20.An opaque hex background has no alpha to read, so this number is a fixed 0.20 fallback rather than your colour's alpha; the border line printed in the same run is ' border: 1px solid rgba(255, 255, 255, 0.28);'.
When to use it
- Getting the four properties a frosted panel actually needs - background, both backdrop-filter lines, and a border light enough to read as glass.
- Trying a blur strength against the reference table (4px, 10px, 20px) before committing to one.
- Producing the -webkit- property at the same time as the standard one, which is easy to forget.
What it does not do
- The alpha in the header and the border colour come from a regular expression over rgba(...). A hex or keyword background has no alpha to find, so both fall back to 0.20, as the #ffffff example shows.
- Only the first two comma-separated parts are used. Radius is fixed at 16px and the shadow is fixed at 0 8px 32px 0 rgba(31, 38, 135, 0.2), with no way to change either.
- The blur must be a number with px or rem. 'blur(10px)' is refused with 'Blur must be a number with px, e.g. 10px.', and percentages are not accepted.
- The heavier variant is always double the blur with saturate(200%), and the tool cannot check the thing that matters most here - whether the text on the frosted surface still meets contrast against whatever ends up behind it.