🪟 毛玻璃 CSS 生成器 — Glassmorphism 构建工具

Create CSS frosted glass / glassmorphism effects with live preview. Adjust blur, transparency, border opacity. Copy backdrop-filter CSS instantly.

The frosted glass effect (glassmorphism) uses backdrop-filter: blur() to blur content behind a semi-transparent element. Use the sliders to tune blur, opacity, border, and saturation — then copy the complete CSS block for your project.

Tint Color

Blur: 12px

BG Opacity: 15%

Border Opacity: 30%

Border Radius: 16px

Saturation: 180%

Glass Card

Glassmorphism effect preview

Generated CSS

How to Use

Adjust the controls

Use the sliders to set blur, background opacity, border opacity, radius, and saturation. Pick a tint color with the color swatch.

See the live preview

The glass card updates instantly. Experiment with values to achieve the look you want.

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之间。