Generate glassmorphism CSS effects visually. Create frosted glass UI elements with blur, opacity, border, and background properties with live preview and copy-ready CSS.
Glassmorphism is a UI design trend that creates frosted glass-like effects using backdrop-filter: blur() combined with semi-transparent backgrounds and subtle borders. It creates a sense of depth and layering, making elements appear as if they are floating over a blurred background. This style is popular in modern UI design systems.
Glassmorphism = backdrop-filter: blur() + semi-transparent background + subtle borderThe key properties for glassmorphism are: backdrop-filter: blur() creates the frosted effect by blurring content behind the element, a semi-transparent background (rgba with low alpha) provides color while showing the blur, and a subtle semi-transparent border creates the glass edge. Border-radius adds to the soft, modern aesthetic.
| Input | Output |
|---|---|
| Blur: 10px, Opacity: 0.7, Border: rgba(255,255,255,0.2) | .glass { background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 12px; } |
| Blur: 20px, Opacity: 0.5, Border: rgba(255,255,255,0.1) | .glass { background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; } |
| Blur: 6px, Opacity: 0.8, Dark theme | .glass { background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; } |