Box shadow generator. Multi-layer, with presets.
Stack up to 5 shadow layers. Per-layer offset, blur, spread, color, inset. Live preview. Presets cover Material elevation, neumorphism (light + dark inset pair), soft glow, retro hard shadow. Browser-only, no signup.
Stack up to 5 shadow layers. Each layer has independent offset, blur, spread, color, and inset toggle. Live preview renders the shadow on a sample card. Copy the CSS or pick a starting preset (Material elevation 1-5, neumorphism, soft glow, retro hard).
Match your page background to preview the shadow in context.
// CSS appears herePrivacy: shadow generation happens in your browser. Nothing is sent or logged.
Five elevation levels. Pre-decided so you don't.
Why elevation as a system. A button at rest needs a small shadow. The same button on hover needs a slightly larger one. A modal needs a much bigger shadow. If every shadow is one-off-tuned, the design feels inconsistent. If you decide the elevation levels up front (1, 2, 3, 4, 5) and use only those, every surface in the system feels related.
Material Design's contribution. Material Design codified elevation as five rest-states (1, 3, 6, 8, 12 dp above the surface) plus interactive elevations (raised, dragged, focused). Each level uses two stacked shadows — a tight close-shadow plus a softer ambient shadow. The math is publicly documented; we ship the canonical formulas as four of the presets above.
Modern brand systems. Most production design systems define 4-6 elevation tokens and reference them by name (shadow-sm, shadow-md, shadow-lg, shadow-xl). Tailwind ships five named elevations by default. Pick the level for each component once, then never tune individual shadows again.
The neumorphism question. The 2020-era trend uses a paired light + dark inset shadow to make UI elements look extruded from the same surface as the background. It produces beautiful screenshots and fails accessibility audits routinely — the contrast between element and background is intentionally low. Use it for accent visual elements (decorative cards, illustrative icons) but never for primary UI controls. Always pair with our Color Contrast Checker to verify the foreground text passes WCAG AA.
Four jobs this tool covers.
Job 1: Build a card-elevation set for a design system. Pick Material 1 through Material 4 in sequence, copy each CSS, paste into your design tokens as shadow-sm / shadow-md / shadow-lg / shadow-xl. The set comes pre-tuned for cohesion — using the four together makes every component in the system feel related.
Job 2: Design a button rest + hover + active state. Build a small shadow for rest (Material 1), tune up for hover (Material 2), tune down with inset for pressed-active. Three CSS strings, paste into :hover and :active selectors. The shadow shift is what gives the button its tactile feel.
Job 3: Modal / dialog overlay shadow. Modals and bottom sheets need much bigger shadows than cards — they're meant to feel "above" the page rather than embedded in it. Material 4 is the right starting point; soft glow with a brand-color tint adds personality without losing professional polish. Pair with our Gradient Generator for the modal background.
Job 4: Brand-distinctive depth. Generic Material shadows look like generic SaaS. To make depth feel branded, tint the shadow with a color from your palette instead of pure black. Soft glow with a 30% moss tint reads as warmer than black; soft glow with a 30% amber tint reads as warmer still. Subtle, but it's what separates "tech-template" depth from "considered design system" depth.
Six questions users ask.
Why stack multiple shadow layers?
Real-world shadows are never one uniform blur. A floating object casts a tight close shadow plus a softer ambient shadow plus often a colored bounce shadow from nearby surfaces. Material Design codified this — every elevation level is two stacked shadows. Modern brand systems (Stripe, Linear, Vercel) layer 3-4 shadows for premium-feeling depth. A single shadow always reads as cheap or generic; layered shadows look considered.
What are the four shadow parameters?
Offset-X moves the shadow horizontally (positive = right). Offset-Y moves it vertically (positive = down — the natural drop direction). Blur radius softens the edge (0 = hard edge, 100 = very diffuse). Spread expands or contracts the shadow before blurring (positive = larger than the source, negative = smaller). Color sets the shadow tint, usually a translucent black like rgba(0,0,0,0.15). Inset reverses the shadow to render inward — used for inset borders and pressed-button states.
What's neumorphism?
A 2020-era design trend that uses a paired inset shadow — one light from the top-left, one dark from the bottom-right — to make UI elements look extruded from the same surface as the background. Built into the preset list. Falls out of accessibility favor because the contrast between element and background is intentionally low; shipping neumorphism as your primary UI risks WCAG failures. Use sparingly for accent elements; pair with our Color Contrast Checker to verify foreground text passes AA.
Material Design elevation — what do the levels mean?
Material Design specifies elevation as a vertical distance in dp (density-independent pixels) above the surface. Level 1 (~1dp) is for cards and chips at rest. Level 2 (~3dp) is for raised buttons. Level 3 (~6dp) is for picked-up cards mid-interaction. Level 4 (~8dp) is for FABs and snackbars. Level 5 (~12dp) is for modal sheets and dialogs. Each level is rendered as two stacked shadows — a tight close-shadow plus a softer ambient shadow. The presets here implement the canonical Material formula.
How do shadows affect performance?
CSS box-shadow is GPU-accelerated in modern browsers — the rendering cost is similar to a transparent element. The performance concern is animating shadow properties (offset, blur, spread) which forces a repaint per frame. For animated state changes, use opacity or transform on a pseudo-element instead, or use the will-change hint sparingly. For static shadows, no measurable performance cost on any modern device. Layer count up to ~10 has negligible impact.
Is the shadow I build sent anywhere?
No. Generation happens entirely in your browser. The page is static HTML; the only network request is the initial page load. Safe for unpublished design system explorations or any color choices you don't want shared with a third party.
Published · Last updated .