Free CSS Glassmorphism Generator

Create stunning frosted glass effects for your UI in seconds. Customize blur, transparency, background color, and border, then copy the ready-to-use CSS code instantly. Perfect for modern, elegant interfaces with zero effort.

Glassmorphism

CSS

background: rgba(255, 255, 255, 0.2);

backdrop-filter: blur(10px);

-webkit-backdrop-filter: blur(10px);

border-radius: 16px;

border: 1px solid rgba(255, 255, 255, 0.3);

Glassmorphism Options

Blur 10px

Transparency 0.2

Border Radius 16px

Border Opacity 0.3

Background Color

Border Color