Shadow & Glass
Box shadows, drop shadows, blur effects, and glassmorphism design tokens. Click any class name to copy it.
Box Shadows
Standard Tailwind box shadows. Use on cards, dropdowns, modals, and panels.
/* Standard box shadows */
--shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
/* Usage */
<div class="shadow-md">Card</div>
<div class="shadow-xl">Modal</div>Custom Shadows (L1–L5)
Project-specific elevation levels using --color-alphapure-black-100. Consistent across light/dark themes.
/* Custom project shadows */
--shadow-l1: 2px 2px 12px 0px var(--color-alphapure-black-100);
--shadow-l2: 2px 2px 16px 0px var(--color-alphapure-black-100);
--shadow-l3: 2px 2px 24px 0px var(--color-alphapure-black-100);
--shadow-l4: 2px 2px 32px 0px var(--color-alphapure-black-100);
--shadow-l5: 2px 2px 100px 0px var(--color-alphapure-black-100);Inset Shadows
Inner shadows for pressed/recessed effects. Great for inputs and toggle tracks.
Drop Shadows
Applied via filter: drop-shadow(). Works on non-rectangular shapes (icons, SVGs, rounded images).
Drop Shadows (L1–L7)
Project elevation levels for drop shadows using alpha-pure-black tokens.
/* Custom drop shadows */
--drop-shadow-l1: 0px 1px 2px var(--color-surface-alpha-pureblack-l1);
--drop-shadow-l2: 0px 1px 3px var(--color-surface-alpha-pureblack-l2);
--drop-shadow-l3: 0px 4px 8px var(--color-surface-alpha-pureblack-l3);
--drop-shadow-l4: 0px 12px 16px var(--color-surface-alpha-pureblack-l3);
--drop-shadow-l5: 0px 20px 24px var(--color-surface-alpha-pureblack-l3);
--drop-shadow-l6: 0px 24px 48px var(--color-surface-alpha-pureblack-l3);
--drop-shadow-l7: 0px 32px 64px var(--color-surface-alpha-pureblack-l3);Blur
Direct blur on elements. Use blur-{size} to blur the element itself.
/* Blur values */
--blur-xs: 4px; --blur-sm: 8px; --blur-md: 12px;
--blur-lg: 16px; --blur-xl: 24px; --blur-2xl: 40px; --blur-3xl: 64px;
/* Usage: blurs the element itself */
<div class="blur-md">Blurred content</div>Backdrop Blur
Blurs content behind an element. The foundation of glassmorphism effects.
/* Backdrop blur tokens */
--backdrop-filter-blur-light: blur(16px);
--backdrop-filter-blur-medium: blur(24px);
--backdrop-filter-blur-heavy: blur(32px);
--backdrop-filter-blur-full: blur(100px);
/* Usage: blurs what's behind the element */
<div class="backdrop-blur-light bg-glass-blur-surface">
Glass overlay
</div>Glass Card
Combine bg-glass-blur-surface + backdrop-blur-light + border-glass-blur-border + noise for the full glass effect.
Glass Card
This card uses backdrop-filter to blur the vibrant content behind it, with a noise overlay for texture.
<div class="bg-glass-blur-surface border border-glass-blur-border
backdrop-blur-light p-24 rounded-16 shadow-l3 noise">
<h3 class="text-glass-text-primary">Glass Card</h3>
<p class="text-glass-text-secondary">Content here...</p>
<button class="bg-glass-button-default border border-glass-border-l2
text-glass-text-primary hover:bg-glass-button-hover">
Action
</button>
</div>Glass Surfaces
Background tokens for glass layers and states.
Glass Borders
Border tokens ranging from subtle (L1) to prominent (L5).
Glass Text Colors
Text color tokens for glass surfaces — primary, secondary, and tertiary hierarchy.
Quick Reference
| Category | Classes | Use Case |
|---|---|---|
| Box Shadow | shadow-{2xs|xs|sm|md|lg|xl|2xl} | Cards, modals, panels |
| Custom Shadow | shadow-{l1|l2|l3|l4|l5} | Theme-aware elevation |
| Inset Shadow | inset-shadow-{2xs|xs|sm} | Pressed/recessed inputs |
| Drop Shadow | drop-shadow-{xs…2xl}, drop-shadow-{l1…l7} | Icons, SVGs, non-rectangular |
| Blur | blur-{xs|sm|md|lg|xl|2xl|3xl} | Blur element itself |
| Backdrop Blur | backdrop-blur-{light|medium|heavy|full} | Glass overlays |
| Glass Surface | bg-glass-{blur-surface|surface-default|…} | Glassmorphism backgrounds |
| Glass Border | border-glass-{blur-border|border-l1…l5} | Glass panel borders |
| Glass Text | text-glass-text-{primary|secondary|tertiary} | Text on glass surfaces |