Comment utiliser : Glassmorphism Generator
- Adjust blur, saturation and background opacity until the card looks right over the sample background.
- Switch the preview background to check readability on busy images or dark designs.
- Copy the CSS (with prefix and fallback) or the Tailwind arbitrary-value classes.
- Remember: the effect only shows when there is something colorful behind the element.
What is glassmorphism?
Glassmorphism is the frosted-glass look popularized by macOS and Windows 11: a semi-transparent panel that blurs whatever is behind it, usually with a thin light border and soft shadow. In CSS it is created with backdrop-filter: blur() plus a translucent background color.
The CSS explained
background: rgba(255,255,255,.18)— the tint. Too opaque and the blur disappears; too transparent and text becomes hard to read.backdrop-filter: blur(12px) saturate(160%)— blurs and slightly boosts the colors behind the element, which keeps the glass from looking gray.-webkit-backdrop-filter— Safari still needs the prefix for reliable support, and it’s the line developers most often forget.- A 1px semi-transparent white border defines the edge of the glass.
Performance & accessibility
Backdrop blur is GPU-intensive: avoid large blurred areas that animate or sit over video, and test scrolling on low-end phones. Always check text contrast over the most demanding part of the background with the Contrast Checker, and keep the fallback rule so browsers without support get a readable, more opaque background.
In Webflow
Webflow’s Style panel has a Backdrop filters option under Effects — add Blur (and Saturate) there, set the background color with alpha, and Webflow outputs the needed CSS.
Aussi recherché comme : glassmorphism, backdrop-filter, frosted glass, blur background css, glass effect, webkit-backdrop-filter.
Outils complémentaires : Glassmorphism Generator
- Box Shadow Generator — Stack multiple shadow layers, tweak offsets, blur, spread and opacity on a live card, then copy the box-shadow or text-shadow CSS.
- CSS Gradient Generator — Design a gradient visually — drag color stops, change the angle or type, start from a preset — and copy production-ready CSS with a solid fallback color.
- Tailwind Arbitrary Value Generator — Paste CSS and get Tailwind’s bracket syntax right the first time — spaces turned into underscores, type hints added, unsupported properties wrapped as arbitrary properties.
- HEX to RGBA Converter — Paste a HEX code, drag the opacity slider and copy the exact CSS you need — legacy rgba(), modern rgb( / alpha) or 8-digit HEX.
Questions fréquentes
Why doesn’t backdrop-filter work?
-webkit- prefix for Safari.Is backdrop-filter supported in all browsers?
What is the difference between filter: blur and backdrop-filter: blur?
filter blurs the element itself, including its text. backdrop-filter blurs only what is behind the element, keeping its content sharp.