🪟 CSS Glassmorphism Generator
Generate CSS glassmorphism effects visually. Adjust blur, transparency, border, and background. Copy ready-to-use CSS. Free glassmorphism generator for modern UI design.
Glass Card
Glassmorphism effect preview
How to Use
1
Adjust the controls
Use the sliders to set blur, background opacity, border opacity, radius, and saturation. Pick a tint color with the color swatch.
2
See the live preview
The glass card updates instantly. Experiment with values to achieve the look you want.
3
Copy the CSS
Click Copy CSS to copy the generated code to your clipboard. Paste it into your stylesheet.
Frequently Asked Questions
What is glassmorphism?
Glassmorphism is a UI design trend that mimics frosted glass — featuring blur, transparency, subtle borders, and shadows to create a layered depth effect. It became popular with iOS and macOS Big Sur designs.
What CSS properties create a glass effect?
The key property is backdrop-filter: blur() which blurs the content behind the element. Combined with a semi-transparent background (rgba with low alpha), a thin border (rgba white), and box-shadow, you get the glassmorphism look.
Does backdrop-filter work in all browsers?
backdrop-filter is supported in Chrome, Edge, Safari, and Firefox (since version 103). Add -webkit-backdrop-filter for Safari compatibility. Internet Explorer does not support it.
How do I add a glassmorphism card to my website?
Copy the generated CSS and apply it to your element. Make sure the element has colorful content behind it — glassmorphism requires visible background content for the blur effect to look good.
What is the best blur value for glassmorphism?
A blur of 10–16px is typically the sweet spot. Too little (under 5px) and the effect is barely visible. Too much (over 24px) and the background is unrecognizable. Pair with 15–25% opacity for best results.
完整指南：CSS玻璃拟态生成器
什么是玻璃拟态？
玻璃拟态模拟磨砂玻璃效果：半透明背景加模糊（backdrop-filter: blur()）、微妙边框和柔和阴影。由macOS Big Sur和Windows 11普及，在保持背景内容可见的同时创建视觉层次。
如何使用
- 调整背景透明度和模糊半径。
- 配置边框和圆角。
- 复制生成的CSS。
专业技巧
- 为Safari添加
-webkit-backdrop-filter前缀。 - 效果仅在图片或渐变背景上可见，纯色背景无效。
- 过度模糊会影响移动端性能——保持在8-20px之间。