Glassmorphism Generator
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(10px) saturate(160%);
-webkit-backdrop-filter: blur(10px) saturate(160%);
border: 1px solid rgb(255 255 255 / 0.35);
border-radius: 16px;The glassmorphism generator builds a frosted-glass panel from four ingredients: a semi-transparent tint, a backdrop blur, a saturation boost and a light border. The effect depends entirely on backdrop-filter, which blurs what is behind the element rather than the element itself.
How it works
- The tint is a colour at low opacity, usually white at 10 to 25 percent, which lifts the panel off its background.
- backdrop-filter: blur() softens whatever is behind. Below about 6px the effect barely reads; above about 20px the backdrop turns to mush.
- Saturation above 100% compensates for the desaturating effect of blurring, which is what makes real frosted glass look colourful rather than grey.
- A 1px border at partial white opacity fakes the light-catching edge of a glass panel and is what most implementations forget.
The rule is written with both the standard and the -webkit- prefixed property, because Safari required the prefix for a long time and prefixed-only support is still worth including.
Examples
A standard frosted panel
Blur
10px
Tint opacity
18%
Saturation
160%
Border opacity
35%
Result
background: rgba(255, 255, 255, 0.18); backdrop-filter: blur(10px) saturate(160%); -webkit-backdrop-filter: blur(10px) saturate(160%); border: 1px solid rgb(255 255 255 / 0.35); border-radius: 16px;
The 160% saturation is doing quiet but important work: blurring averages colours towards grey, and boosting saturation restores the colour the blur removed.
A heavier, more opaque panel
Blur
20px
Tint opacity
40%
Result
background: rgba(255, 255, 255, 0.4); backdrop-filter: blur(20px) saturate(160%);
Raising the tint to 40 percent makes text on the panel far more readable, at the cost of the transparency that makes the effect recognisable. That trade-off is the central problem with the style.
Frequently asked questions
Why is my glassmorphism panel completely transparent with no blur?
Usually one of two things: the element has no background colour at all, so there is nothing to tint, or an ancestor has overflow hidden combined with a filter, which prevents the backdrop from being sampled. backdrop-filter also does nothing if there is nothing behind the element to blur.
Is glassmorphism accessible?
Not by default. Text on a semi-transparent panel has a contrast ratio that changes with whatever scrolls behind it, so it can pass a contrast check in one scroll position and fail in another. Raise the tint opacity until contrast holds against the lightest and darkest parts of your background.
Does backdrop-filter hurt performance?
It can. The browser has to sample and blur the backdrop on every frame where anything moves behind the panel, which is expensive on large areas. A fixed sidebar over a scrolling page is the worst case; a small static card is usually fine.
Why include the -webkit- prefixed property?
Because Safari shipped backdrop-filter behind the prefix for years, and some versions still in use support only the prefixed form. Including both costs one line and covers those users.