Free CSS Box Shadow Generator — Multi-Layer, Inset & Outset, Live Preview

How to Generate a CSS Box Shadow in 6 Steps

1. 1

   Pick a preset as a starting point

   Open the Presets panel and filter by category — Tailwind, Material, Neumorphic, Glow, Glass, or Special. Click a preset thumbnail to load its full multi-layer configuration into the builder.

2. 2

   Adjust each layer to taste

   Drag the Offset X/Y, Blur, and Spread sliders, or type exact values into the numeric inputs. Pick a shadow color from the swatch, then dial the Alpha slider to control how much of the background shows through.

3. 3

   Stack additional layers if needed

   Click Add Layer to stack up to eight shadows. Use the up / down arrows on each layer to control paint order — later layers paint above earlier ones. Toggle the Inset checkbox for any layer that should paint inside the box.

4. 4

   Validate the result against real surfaces

   Switch the preview surface between Light, Gray, Dark, and Checker. Black shadows that look perfect on Light usually vanish on Dark — adjust the color or alpha until the elevation reads on every background you target.

5. 5

   Switch the preview shape

   A shadow that looks balanced on a card may feel heavy on a button, pill, or circle. Toggle between the five preview shapes to confirm the elevation reads correctly at the size and curvature it will ship at.

6. 6

   Copy in your target format

   Pick CSS declaration, raw CSS value, Tailwind v4 arbitrary class, SCSS variable, CSS custom property, React inline style, or filter:drop-shadow(). Click Copy and paste into your codebase. Use Export JSON to share the exact configuration with a teammate.

Elevation Scale: Tailwind vs Material vs Apple

Each major design system uses a small, opinionated set of elevations rather than arbitrary values. Picking from this scale — and applying it consistently — is more important than the exact pixel values you choose. Use the table below to map a UI surface (button, card, modal) to a sensible elevation level.

The Three-Layer Recipe Real Design Systems Use

Look closely at any Material Design or Tailwind card and you will see not one shadow but several stacked together. This is how light actually behaves: a tight contact shadow underneath, a softer ambient shadow extending outward, and (for higher elevations) an atmospheric layer that suggests distance from the page. To reproduce this in our generator, click Add Layer twice after loading the default preset, then set each layer using the table below.

box-shadow vs filter: drop-shadow() — When to Use Which

Both properties paint a shadow, but they follow different shapes. The box-shadow property follows the element's border-box — a rectangle, or a rounded rectangle if you have a border-radius set. The filter: drop-shadow() function paints a shadow that follows the element's actual rendered silhouette — including transparent PNG cutouts, SVG paths, and the gaps between letters of text.

Our generator exports both formats. The filter: drop-shadow() output skips inset layers (the function has no inset equivalent) and concatenates remaining layers with spaces, per MDN's drop-shadow() reference.

Performance: Keeping Box Shadows Cheap at 60fps

Box-shadow is GPU-accelerated for the initial paint, but any change to its value triggers a fresh paint on every affected pixel — including large blurred regions. On a list of fifty cards each with a 40px-blur shadow, even a slight color change can stall the main thread for several frames. The fix is to never animate box-shadow directly. Instead, render two pre-baked shadow states and crossfade between them by animating opacity:

.card { position: relative; box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.card::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}
.card:hover::after { opacity: 1; }

Other production tips: stick to opacity and transform for animation, set will-change: transform only on the elements that need it, and minify your final stylesheet with our CSS Minifier so long shadow declarations don't bloat your bundle. For a complete view of browser repaint behaviour, see Google's web.dev animation guide.

Accessibility: Shadows Are Not Borders

A shadow alone is not a reliable boundary signal for users with low vision, high-contrast mode enabled, or forced-colors active. Windows High Contrast Mode strips all box-shadow values to nothing, so any UI that relies on shadows to communicate structure breaks instantly. Defensive practice: always pair a meaningful shadow with a 1px solid borderthat uses a real color token, not transparent or rgba(0,0,0,0.05).

When the shadow itself is the focus indicator (the common :focus-visible ring pattern), make sure the ring meets the WCAG 2.2 focus appearance requirements: at least a 2×2 CSS pixel area of contiguous contrast and a contrast ratio of at least 3:1 against adjacent colors. Use our Color Contrast Checker to verify the focus ring color against both the card surface and the page background.

Browser Support

box-shadow has been a fully supported, unprefixed CSS property in every major browser for over a decade. No fallbacks, polyfills, or vendor prefixes are required for the syntax this generator emits.