Pages

Tools

// tools / glass-generator

Glassmorphism

Glass Card

Frosted glass effect

A beautiful frosted glass card with customizable blur, opacity, saturation, and border effects.

backdrop-filter
CSS

Presets

Background

Glass Properties

Blur40px
Saturation180%
Border Opacity20%
Border Width1px
Border Radius16px

Tint

#ffffff
Tint Opacity8%

Texture

Export Code

/* Glassmorphism */
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(40px) saturate(180%);
-webkit-backdrop-filter: blur(40px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.20);
border-radius: 16px;