Designing card or modal elevation that feels natural rather than harsh or flat. Building accessible focus-ring styles — a glowing outline that signals keyboard navigation without relying on colour alone. Crafting neon or glow effects for hero CTAs and eye-catching UI elements. Replicating Material Design or Apple-style elevation tokens for a design system or component library. Creating pressed-button or inset card effects with inset shadows for tactile feedback. Fine-tuning shadows for dark mode where contrast and visibility requirements differ from light mode.

Set the offset: X and Y control the shadow's direction. Positive Y pushes the shadow downward; positive X pushes it right. Zero values centre the shadow. Adjust blur and spread: Blur softens the shadow's edge (0 = sharp, higher = softer); spread expands or shrinks the shadow relative to the box. Choose colour and opacity: Pick a colour and set alpha (opacity) — usually a semi-transparent black or tinted shadow for realism. Toggle inset: Enable inset to flip the shadow inward, creating recessed or pressed-in effects. Stack multiple layers: Add a second or third shadow to build depth — typically a tight dark shadow near the box plus a wide soft one farther out. Copy CSS: Once satisfied, copy the production-ready CSS rule directly into your stylesheet.

Single shadows look artificial. Real elevation uses two or three layered shadows: a tight, dark, close-in shadow for immediate depth, plus a wider, softer, farther-out one for cast-shadow effect. See the Material elevation preset for a working example. Pure black is too harsh. Use 10–25% alpha on #000 (e.g. #0003 ), or tint the shadow with a complementary colour for warmth and realism. Shadows get clipped by overflow. If the parent container has overflow: hidden , shadows are cut off at the box edge. Use a wrapper element without overflow, or move the overflow property to a child. Shadows show through transparent boxes. A box with no background colour will display the shadow through its own interior, which is usually unintended. Add a background or check your CSS. Dark mode invisibility. Dark shadows on dark backgrounds nearly disappear. Use light-tinted or bright shadows, or add a subtle inner border for visibility in dark themes. Mobile performance. Large blur radii on many elements can strain low-end devices. Test fancy glows on real mobile hardware before shipping to production.

CSS Box Shadow Generator

Build single or multi-layer CSS box shadows visually. Adjust offset, blur, spread, color, and copy CSS.

Shadow layers

Preview

Sample

CSS

What is this for?

The CSS box-shadow property adds depth to elements — drop shadows on cards, button highlights, focus rings, glows, and neon effects. The syntax is straightforward (x y blur spread color, optional inset, multiple shadows comma-separated), but tweaking values blind in code is tedious and error-prone. This tool provides sliders for every parameter, instant visual feedback, and copy-ready CSS output, eliminating the guess-and-check cycle.

When to use it

Designing card or modal elevation that feels natural rather than harsh or flat.
Building accessible focus-ring styles — a glowing outline that signals keyboard navigation without relying on colour alone.
Crafting neon or glow effects for hero CTAs and eye-catching UI elements.
Replicating Material Design or Apple-style elevation tokens for a design system or component library.
Creating pressed-button or inset card effects with inset shadows for tactile feedback.
Fine-tuning shadows for dark mode where contrast and visibility requirements differ from light mode.

How it works

Set the offset: X and Y control the shadow's direction. Positive Y pushes the shadow downward; positive X pushes it right. Zero values centre the shadow.
Adjust blur and spread: Blur softens the shadow's edge (0 = sharp, higher = softer); spread expands or shrinks the shadow relative to the box.
Choose colour and opacity: Pick a colour and set alpha (opacity) — usually a semi-transparent black or tinted shadow for realism.
Toggle inset: Enable inset to flip the shadow inward, creating recessed or pressed-in effects.
Stack multiple layers: Add a second or third shadow to build depth — typically a tight dark shadow near the box plus a wide soft one farther out.
Copy CSS: Once satisfied, copy the production-ready CSS rule directly into your stylesheet.

Understanding each parameter

X / Y offset — Controls shadow direction. For a natural "light from above" feel, use a small positive Y and zero or minimal X offset.
Blur — Higher values create softer, more diffuse shadows. Zero produces a sharp edge; 10–20px is typical for subtle elevation.
Spread — Expands (positive) or contracts (negative) the shadow's size relative to the box. Useful for creating halos or tightening shadows.
Colour and alpha — Semi-transparent blacks (#0003 to #0008) look natural; pure #000 appears too heavy. In dark mode, light-tinted or bright shadows often work better.
Inset — Reverses the shadow direction, placing it inside the box boundary for recessed or pressed effects.

Common gotchas

Single shadows look artificial. Real elevation uses two or three layered shadows: a tight, dark, close-in shadow for immediate depth, plus a wider, softer, farther-out one for cast-shadow effect. See the Material elevation preset for a working example.
Pure black is too harsh. Use 10–25% alpha on #000 (e.g. #0003), or tint the shadow with a complementary colour for warmth and realism.
Shadows get clipped by overflow. If the parent container has overflow: hidden, shadows are cut off at the box edge. Use a wrapper element without overflow, or move the overflow property to a child.
Shadows show through transparent boxes. A box with no background colour will display the shadow through its own interior, which is usually unintended. Add a background or check your CSS.
Dark mode invisibility. Dark shadows on dark backgrounds nearly disappear. Use light-tinted or bright shadows, or add a subtle inner border for visibility in dark themes.
Mobile performance. Large blur radii on many elements can strain low-end devices. Test fancy glows on real mobile hardware before shipping to production.