Glassmorphism Generator

Create beautiful frosted glass effects

Configuration

16px
0.5
100%
12px

Background

background: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(16px) saturate(100%);
-webkit-backdrop-filter: blur(16px) saturate(100%);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.125);
color: #ffffff;
G

Glassmorphism

The frosted glass effect adds depth and visual hierarchy to your interface.