How to use the Glassmorphism CSS Generator
- Adjust blur, transparency, saturation and border.
- Pick a tint colour and corner radius.
- Copy the CSS into your stylesheet.
What does this tool do?
Glassmorphism uses a semi-transparent background with backdrop-filter: blur() so whatever is behind the element shows through softly, like frosted glass. A faint light border sells the effect.
The CSS includes the -webkit- prefix for Safari. It works best over colourful backgrounds or images.
Why use it?
- Live preview.
- Safari-ready CSS.
- Tint and saturation control.
Accuracy and limits
- Check text contrast on glass surfaces — light text on a pale blurred background can be hard to read.
Privacy
The calculation happens instantly in your browser. The numbers you enter are not sent to our servers or saved. There's no account to create and nothing to install.
Last reviewed by the M2Toolkit team.