Glassmorphism Generator

Create beautiful glass-like UI effects with custom CSS.

Background Color

Card Tint

Opacity: 15%

Blur: 12px

Border brightness: 20%

Glass Card

Preview your effect

CSS Output

background: rgba(139, 92, 246, 0.15);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 16px;