Glassmorphism sells a specific promise: a card that looks like frosted glass floating
over your background. The reality is five CSS lines, and most tutorials hand you a
snippet without saying which parts are safe to tune or what happens in browsers that
ignore the effect. This guide documents the generator we ship, including its fixed
constants and the input that silently produces broken CSS.
The exact output at default settings
The generator builds one CSS declaration block from four controls. With nothing
touched, this is what the copy button gives you:
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.18);
Five properties, and only the first three respond to the controls:
- Opacity, range 0 to 1 in steps of 0.01, default 0.25. It becomes the alpha of the
tint background.
- Blur, range 0 to 50 pixels, default 16. It is the frost radius.
- Saturation, range 100 to 200 percent, default 180. Values above 100 boost the
colors behind the glass.
- Tint color, default white. The tool converts your hex to rgba and combines it
with the opacity value.
Two properties are fixed constants in the template. The corner radius is always
16px, and the border is always 1px solid white at 0.18 alpha. Neither has a slider.
If your design needs a different radius or a visible border, edit the output after
copying, that is the intended workflow.
What each variable actually does
The blur radius does the visual heavy lifting. At 0 the card is a plain translucent
rectangle. Around 16 pixels, the default, backgrounds smear into soft color fields
that read as glass. Near the 50 pixel maximum, detail behind the card is gone
entirely and the effect starts looking like an opaque gradient.
Saturation is the underrated control. At 100 percent the backdrop keeps its own
colors, which often look washed out behind a white tint. At the 180 default, colors
under the card appear richer than the surrounding page, which is most of what makes
the glass feel alive. The range stops at 200, so oversaturating into ugliness is
structurally prevented.
Opacity trades transparency for legibility. At 0.25 the background dominates and
text pays for it. Raising opacity pushes the tint toward solid and restores
readability, at the direct cost of the glass look.
The input that produces broken CSS
The tint field expects six-digit hex. The conversion reads the hex string by
position, two digits per channel. Type the three-digit shorthand #fff instead of
#ffffff and the parse produces rgba(255, 15, NaN, 0.25), with the final channel
failing to parse at all. Browsers drop an invalid color declaration, so the element
renders with no background while the preview and the copied text both look
plausible.
The rule is unconditional: type the full six digits. #fff, #fff0, and named colors
like white all fail the same way. This is the single most likely way to leave this
tool with broken output, because the invalid value fails silently.
Where the generated CSS fails in production
The snippet has no fallbacks, and that is a real gap you must fill yourself:
1. Browsers that do not support backdrop-filter render a 25 percent white overlay
with no blur and no saturation. The card becomes a faint wash that fails to
separate from the background.
2. The output contains no box-shadow. Depth comes entirely from the blur, so
unsupported browsers get a flat surface with no elevation cue.
3. The fixed border is white at 0.18 alpha. On light backgrounds it is nearly
invisible, which means the edge definition you saw over a dark gradient
disappears over a pale one.
The standard fix is your own support query. Provide a more opaque background for
fallback, then apply the glass values inside a supports block. The generator does
not emit this, so budget one extra minute per component.
The contrast cost, measured
Glass surfaces sit between your text and an uncontrolled background, so contrast is
where this style does damage. Run the numbers and the damage is specific. White
text on #f093fb, the opening color of one gradient preset in this tool, computes to
2.04:1 under the WCAG formula our contrast checker implements. That fails AA for
normal text at 4.5:1, fails AA for large text at 3:1, and fails everything else.
The composited case is worse than any flat pair suggests, because blur smears the
backdrop into lighter and darker regions, and your text sits over all of them. The
working rules are:
- Measure text color against the backdrop color at its worst point, not the tint
alone.
- If body text must live on the card, raise opacity toward 0.6 or darken the tint,
and accept less glass.
- Keep small text off glass entirely and place it on adjacent solid surfaces.
Build a glass card, step by step
1. Pick the preset gradient closest to your real background, or picture the actual
page behind the card.
2. Start from the defaults, blur 16, opacity 0.25, saturation 180. They are good
defaults, that is why they ship.
3. Tune blur first until the backdrop smears the way you want.
4. Tune opacity second, stopping as soon as placeholder text reads comfortably.
5. Nudge saturation last, usually between 140 and the 180 default.
6. Type the tint as six-digit hex, verify the preview shows a background.
7. Copy the CSS.
8. Add a fallback background inside a supports query, and adjust the fixed radius
and border for your design system.
Checklist before you ship a glass component
- Tint entered as six-digit hex, never the three-digit shorthand.
- Fallback background added for browsers without backdrop-filter.
- Text contrast measured against the composed backdrop, at 4.5:1 for body text.
- Fixed 16px radius and 0.18 white border adjusted or accepted deliberately.
- Blurred surface area kept reasonable, large full-screen blurs cost GPU on every
frame.
- Tested on a light background, not only the demo gradient.
Glassmorphism is five lines of CSS plus one honest decision about contrast and
fallbacks. The generator covers the five lines. The decision is yours, and the
checklist above is the shortest path to getting it right.
What opacity and blur values survived on your production glass cards, and did any
of them fail a contrast check after compositing? Prototype yours in our
[glassmorphism CSS generator](https://webrecast.com/en/glassmorphism-generator)
and measure the result before it ships.
