CSS毛玻璃生成器
按背景与面板颜色、透明度、模糊、饱和度、边框、圆角和阴影生成毛玻璃CSS，实时预览并复制。
使用步骤
如何使用
- Choose the background and panel colors, then set opacity, blur, saturation, border, radius, and shadow.
- Review the live preview and keep text contrast in mind.
- Generate, copy, or reset the CSS.
A practical glass recipe
The generator combines an rgba panel background, a translucent border, backdrop-filter blur and saturation, a radius, and a soft shadow. The preview uses an original multi-color gradient so the transparency and blur remain visible.
Fallbacks and accessible contrast
Browsers without backdrop-filter still show the translucent panel background, but the glass effect is reduced. Check the contrast of every text and icon placed on top of the panel; decorative translucency must not replace a readable solid or high-contrast treatment.
常见问题
你可能还想知道
What happens without backdrop-filter support?
The panel keeps its translucent background, border, radius, and shadow. Only the background blur and saturation enhancement are unavailable.
Why can the same settings look different?
Blur and saturation depend on the colors and detail behind the panel, while percentage opacity blends with the current background.
How should I check text contrast?
Preview the actual text over the final background and use a sufficiently opaque panel or stronger text color when the contrast is not clear at every point.