Shadows & Effects
Elevation, glow effects, and glassmorphism for depth and premium feel.
Elevation Shadows
Four levels of elevation for layering UI elements. Shadows are tuned for both dark and light modes.
Small
shadow-sm
Medium
shadow-md
Large
shadow-lg
XL
shadow-xl
Glow Effects
Subtle color glow for hover states, active elements, and emphasis. Inspired by Superhuman's premium interaction feedback.
Purple Glow
glow-purple
Pink Glow
glow-pink
Brand Glow
glow-brand
Glassmorphism
Frosted glass effects for overlays, modals, and floating elements. Uses backdrop-filter for depth without opacity.
Glass Card
This card uses backdrop-filter blur with a semi-transparent background and subtle border. The content behind shows through with a frosted effect.
.monarch-glass
Gradient Border
Featured Content
Hover over this card to see the gradient border. Uses background-clip with the brand gradient applied to the border-box.