Glassmorphism Generator

Create beautiful glass effects with CSS

Blur10px

Transparency0.2

Saturation150%

Color

#ffffff

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

Glassmorphism

This is how your glass effect looks over a colorful background.