Glassmorphism Generator
Frosted-glass card CSS — translucent tint, backdrop-filter blur and saturation, thin border, radius, shadow — with preview, Safari prefix and fallback.
The CSS for the glass card (background rgba, backdrop-filter, border, radius, shadow), the @supports fallback, a preview over a colourful backdrop — or the neumorphism raised and inset rules.
Example: White at 20 %, blur 12 px, border 30 %, radius 16: background rgba(255,255,255,.2), backdrop-filter blur(12px), border 1px solid rgba(255,255,255,.3); neumorphism gives paired light and dark shadows.
Blur what is behind,
tint what is in front.
What the glass effect is made of, why the fallback exists, and how neumorphism differs.
Glass
A translucent fill (your colour at the opacity you set, as rgba) lets the backdrop through; backdrop-filter: blur() blurs whatever is behind the element — and saturate() can boost its colours — so the card looks frosted; a thin semi-transparent border catches the light at the edge and a soft shadow lifts it. The effect only reads on a busy or colourful backdrop, which is why the preview sits on a gradient.
Support and fallback
backdrop-filter works in current Chrome, Edge, Firefox and Safari (Safari with the -webkit- prefix, included). Where it is missing the @supports not (…) block raises the fill opacity so the text stays readable over an unblurred backdrop. Check contrast against real content: what scrolls beneath a glass panel changes its readability.
Neumorphism
The soft-extruded look uses no transparency: the card is the same colour as the surface and two box-shadows — a darker one to the bottom-right and a lighter one to the top-left at the distance and intensity you set — make it appear raised; the inset variant makes it appear pressed. Contrast is inherently low, so keep it for decoration. Nothing leaves the browser; the same four anonymous usage counts as the rest of the site apply.
SOURCES
- Filter Effects Level 2 backdrop-filter (with -webkit- prefix for Safari), @supports fallback; neumorphism as two box-shadows at ± distance with lightened / darkened base colour
Last reviewed 22 September 2026. How results are checked: How we verify.