About the CSS Glassmorphism Generator
Glassmorphism is a UI style that imitates frosted glass: a semi-transparent panel that blurs whatever is behind it, with a subtle light border. It became popular through Apple's macOS and iOS and Microsoft's Fluent design, and it looks great over colorful backgrounds and images.
The CSS Glassmorphism Generator produces the exact CSS you need using backdrop-filter for the blur, an RGBA background for transparency, a translucent border and a soft shadow. Adjust each property while watching the effect over a vibrant sample background. The code includes the -webkit- prefix for Safari support.
How to use the CSS Glassmorphism Generator
- Adjust blur, transparency and saturation.
- Set the border opacity, radius and glass color.
- Watch the glass card update over the colorful background.
- Copy the CSS and apply it to your element.
Frequently asked questions
Why is my glass effect not blurry?
backdrop-filter only blurs what is behind the element. Make sure there is colorful content or an image underneath and that the background color is semi-transparent.
Is backdrop-filter supported by browsers?
Yes, in all modern browsers. Safari requires the -webkit-backdrop-filter prefix, which is included in the generated code.
Does glassmorphism affect performance?
Heavy blur on large areas can be costly on low-end devices, so use it for cards, navbars and modals rather than full-page backgrounds.