Glass
Glassmorphism utility classes for creating frosted glass effects with backdrop blur and gradients.
Glass utilities provide ready-to-use glassmorphism effects that combine semi-transparent backgrounds, gradient overlays, and carefully crafted borders.
These utilities are perfect for creating modern, elegant UI elements with a frosted glass aesthetic that automatically adapts to both light and dark modes. The design is inspired by and complements the liquid glass effect used in modern iOS and macOS interfaces, bringing that same premium feel to your web applications.
| Class | Styles |
|---|---|
glass-1 | border-border from-card/80 to-card/40 dark:border-border/10 dark:border-b-border/5 dark:border-t-border/20 dark:from-card/5 dark:to-card/0 border bg-linear-to-b |
glass-2 | border-border from-card/100 to-card/80 dark:border-border/10 dark:border-b-border/5 dark:border-t-border/20 dark:from-card/10 dark:to-card/5 border bg-linear-to-b |
glass-3 | border-border from-card/30 to-card/20 dark:border-border/10 dark:border-t-border/20 dark:border-b-border/5 dark:from-primary/5 dark:to-primary/2 border bg-linear-to-b |
glass-4 | border-border border-b-input/90 from-card/60 to-card/20 dark:border-border/10 dark:border-t-border/30 dark:from-primary/10 dark:to-primary/5 border bg-linear-to-b dark:border-b-0 |
glass-5 | border-border border-b-input from-card/100 to-card/20 dark:border-border/10 dark:border-t-border/30 dark:from-primary/15 dark:to-primary/5 border bg-linear-to-b dark:border-b-0 |
Preview
Free
glass-1
glass-2
glass-3
glass-4
glass-5
Need help?
File a feature request, report a bug, or ask me anything.