CSS毛玻璃效果生成器

使用CSS创建毛玻璃效果

浏览器处理您的数据绝不离开浏览器

Glass Effect Settings

Blur16px
Transparency20%
Saturation180%
Border Radius16px
Border Width1px

Colors

Glass Tint
Border Color
Shadow Color
Text Color

Enable Shadow

Shadow Blur
Shadow Spread

Preview

Glassmorphism

A modern UI design trend that creates a frosted glass effect using backdrop filters and transparency.

Button

CSS

.glass {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px 0px rgba(0, 0, 0, 0.2);
}

Presets

About CSS毛玻璃效果生成器

使用CSS创建毛玻璃效果

Use this free online css生成器 tool to work faster without installing extra software. The interface is built for quick input, clear output, and straightforward results on desktop and mobile devices.

Processing

This tool runs in your browser whenever possible, which keeps your inputs private and reduces unnecessary round-trips to the server.