Box Shadow Collection

Subtle 1dp lift — ideal for chips, tags, and small interactive elements.

Light 2dp card shadow — the standard for content cards and panels.

Medium 4dp shadow — great for dropdowns, popovers, and floating panels.

Prominent 8dp shadow — use for modals, dialogs, and sticky headers.

Deep 16dp shadow — for full-screen overlays and high-priority surfaces.

Maximum depth shadow — for hero cards and dramatic focal elements.

Flat neumorphic surface — no depth, just a subtle pressed appearance.

Classic neumorphic raised button — light from top-left, shadow bottom-right.

Neumorphic pressed/active state — inset shadows simulate a pushed-in button.

Concave neumorphic well — for input fields and recessed containers.

Dark-mode neumorphic raised card — works on dark gray backgrounds.

Dark-mode neumorphic pressed state — inset shadows on dark surfaces.

Indigo-tinted shadow — pairs with primary brand colors and CTA buttons.

Sky-blue shadow — great for info cards, links, and interactive tiles.

Green-tinted shadow — use for success states, badges, and confirmation cards.

Red-tinted shadow — for error states, destructive actions, and alert cards.

Amber-tinted shadow — for warning states, caution badges, and highlight cards.

Purple shadow — for premium features, pro badges, and upgrade prompts.

Pink shadow — for creative tools, social features, and playful UI elements.

Subtle inset shadow — for input fields, text areas, and recessed containers.

Medium inset shadow — for active/focused input states and pressed buttons.

Deep inset shadow — for wells, troughs, and strongly recessed surfaces.

Inset top shadow that mimics a colored top border — for active tab indicators.

Inset bottom shadow — for underline-style active states and focused inputs.

Three-layer soft shadow — creates a natural, photorealistic depth effect.

Five-layer deep shadow — for premium cards and high-impact hero elements.

Multi-layer indigo shadow — for branded cards and interactive components.

Offset layered shadow — creates a stacked paper or card-deck visual effect.

White outer glow — for dark-mode cards and highlighted elements on dark backgrounds.

Indigo neon glow — for dark-mode CTAs, active states, and focus rings.

Cyan neon glow — for tech-themed dark UIs, terminal-style elements.

Green neon glow — for success indicators and active status badges on dark backgrounds.

Pink neon glow — for creative dark-mode UIs and vibrant accent elements.

Warm amber glow — for notification badges, warning indicators, and warm dark UIs.

Small sharp shadow — for retro/pixel-art UI elements and brutalist designs.

Medium sharp shadow — for bold cards and strong visual hierarchy.

Large sharp shadow — for brutalist hero sections and high-contrast layouts.

Colored sharp shadow — for playful, retro-styled interactive cards.

Double sharp shadow — creates a stacked offset effect for comic-book style UI.

Shadow that mimics a 1px border — use instead of border for cleaner rendering.

Accessible focus ring — use for keyboard-focused interactive elements.

Bottom-only shadow — for navigation bars, sticky headers, and tab panels.

Top-only shadow — for sticky footers, bottom sheets, and floating toolbars.

Explicit shadow removal — use to override inherited box-shadow values.