Skip to main content

Glass Effects

Modern glassmorphism effects with backdrop-filter support

Light Glass

Subtle backdrop blur

Strong Glass

More intense blur

Glass Intensity Levels

Extra Small

--cs-glass-bg-xs

Small

--cs-glass-bg-sm

Medium

--cs-glass-bg-md

Large

--cs-glass-bg-lg

Extra Large

--cs-glass-bg-xl

2X Large

--cs-glass-bg-2xl

Dark Glass Effects

Dark Small

Subtle dark glass

Dark Medium

Medium dark glass

Dark Strong

Strong dark glass

Colored Glass

Blue Glass

--cs-glass-bg-blue

Purple Glass

--cs-glass-bg-purple

Green Glass

--cs-glass-bg-green

Pink Glass

--cs-glass-bg-pink

Amber Glass

--cs-glass-bg-amber

Glass Card Examples

Fast Performance

Optimized glass effects with hardware acceleration for smooth 60fps animations.

Customizable

Flexible design tokens for complete control over glass effects and colors.

CSS Variables Reference

Background:

--cs-glass-bg-xs --cs-glass-bg-sm --cs-glass-bg-md --cs-glass-bg-lg

Borders:

--cs-glass-border-xs --cs-glass-border-sm --cs-glass-border-md --cs-glass-border-lg

Combine with backdrop-filter: blur() for best results.