Free Web Tools - Day-to-Day Calculators & Converters

Glassmorphism Generator

Create trendy frosted-glass CSS effects for your UI.

Blur: 10px

Transparency: 0.2

Saturation: 180%

Color

CSS Code

background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px) saturate(180%);
-webkit-backdrop-filter: blur(10px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.3);

Glass UI

Adjust the sliders to see how blur and transparency interact with the colorful background behind this card.