Glassmorphism Generator

Create modern frosted glass effects using CSS. Adjust blur, transparency, and saturation in real-time and export the code for your UI projects.

Blur (10px)

Transparency (20%)

Outline Opacity (10%)

Saturation (100%)

Base Color

background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px) saturate(100%);
-webkit-backdrop-filter: blur(10px) saturate(100%);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);

Glass Card

This is a real-time preview of your glassmorphism effect. It reacts to your settings instantly so you can perfect the look.

Live Preview

Mastering Glassmorphism

Saturation Check

Upping the saturation can make the glass feel more vivid and colored by the background, which is a key trait of Apple's modern UI language. Keep it between 120-150% for that premium look.

The Border Secret

Always use a semi-transparent border. It defines the edge of the glass and makes it feel like it has actual physical volume rather than just being a blurred patch.