Glassmorphism Generator

Builds a glassmorphism CSS snippet from blur, transparency, and border settings.

Processed in this tab

Blur16px

Transparency60%

Saturation180%

Base Color

background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.125);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);

Glassmorphism

This creates a frosted glass effect using the backdrop-filter property. It's popular in modern UI design.