CSS Box Shadow Generator

You need a Material Design–style card with a subtle contact shadow plus a soft ambient shadow — that’s two box-shadow layers, six values each, and the interaction between blur, spread, and opacity is hard to predict from numbers alone. Or you want a neon glow effect that requires three stacked colored shadow layers with increasing spread. Writing box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.10) from memory is the CSS equivalent of parallel parking by sound.

Why This Generator (Not DevTools or Tailwind Utilities)

Chrome DevTools lets you inspect existing shadows but has no visual builder for creating new ones. Tailwind’s shadow-lg presets are convenient but don’t support multi-layer shadows or colored glows. This tool lets you add up to 6 shadow layers, adjust each one with sliders (offset, blur, spread, color, inset), and see the combined result update in real time. It also outputs the Tailwind arbitrary value syntax alongside the standard CSS. Everything runs in your browser; no data is sent to any server.

Building CSS Box Shadows

A CSS box shadow generator removes the guesswork from crafting box-shadow declarations. Instead of writing values by hand and refreshing your browser, you adjust sliders and see the result in real time. This is especially valuable when working with multiple shadow layers, where the interaction between layers is hard to predict from numbers alone.

Understanding the box-shadow Value Syntax

Each shadow layer follows a fixed order of values:

box-shadow: [inset] <offset-x> <offset-y> [blur-radius] [spread-radius] <color>;

How Each Parameter Affects the Shadow

Offset X and Y

The offsets control the direction of the shadow, implying the position of the light source. A shadow with offset-x: 0, offset-y: 4px suggests light coming straight from above. Shifting X to 8px implies a light source to the upper left.

For natural-looking shadows, keep the X and Y offsets in the same ratio as the light direction:

/* Light from top-left */
box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.2);

/* Light from directly above */
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);

Blur Radius

Blur controls the softness of the shadow edge. A blur of 0 creates a hard-edged shadow — useful for retro and brutalist designs. Values in the 8–24px range produce realistic ambient shadows.

/* Hard shadow — retro style */
box-shadow: 4px 4px 0 #000;

/* Soft, ambient shadow */
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);

Spread Radius

Spread modifies the size of the shadow before blur is applied. A positive spread makes the shadow extend beyond the element boundary on all sides. A negative spread shrinks it, which is useful for keeping a shadow directional without it bleeding around corners:

/* Shadow only at the bottom — negative spread cancels sides */
box-shadow: 0 12px 16px -8px rgba(0, 0, 0, 0.25);

Color and Opacity

Using rgba() for shadow color gives independent control over hue and transparency. A common mistake is using fully opaque black (#000). In practice, shadows are translucent layers — the underlying surface color shows through. Values between 0.1 and 0.35 alpha produce the most realistic results.

Colored shadows can add visual interest on dark backgrounds:

/* Purple glow */
box-shadow: 0 0 20px 4px rgba(99, 102, 241, 0.5);

/* Warm amber shadow */
box-shadow: 4px 6px 16px rgba(234, 88, 12, 0.3);

Inset Shadows

The inset keyword draws the shadow inside the element’s padding box rather than outside. Inset shadows are essential for:

• Pressed states: A button that looks physically depressed when clicked
• Recessed inputs: A text field that looks inset into the page
• Inner glows: A subtle light effect along the inner edge of a container

/* Depressed/pressed button */
.btn:active {
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.3);
}

/* Recessed text input */
input {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.12);
}

Multi-Layer Shadow Techniques

Layered Depth (Material Design approach)

Combine a tight contact shadow with a soft ambient shadow to simulate real-world lighting:

.card {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 4px 16px rgba(0, 0, 0, 0.10);
}

.card--elevated {
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.12),
    0 10px 30px rgba(0, 0, 0, 0.14);
}

Neon/Glow Effect

Stack multiple colored layers at increasing spread radii to build a glowing border:

.neon {
  box-shadow:
    0 0 4px 1px rgba(99, 102, 241, 0.8),
    0 0 12px 3px rgba(99, 102, 241, 0.5),
    0 0 30px 6px rgba(99, 102, 241, 0.25);
}

Border Replacement

Use box-shadow with zero blur and spread to simulate a border that does not affect layout. This avoids the box model change that border introduces:

/* Effectively the same as border: 2px solid #6366f1 but no layout shift */
.highlight {
  box-shadow: 0 0 0 2px #6366f1;
}

This technique is widely used for focus rings:

button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.5);
}

Neumorphism / Soft UI

Neumorphism uses two shadows — a light shadow on one side and a dark shadow on the opposite — to make elements appear extruded from the background:

:root {
  --bg: #e0e5ec;
}

.neumorphic {
  background: var(--bg);
  box-shadow:
    6px 6px 12px rgba(163, 177, 198, 0.6),
    -6px -6px 12px rgba(255, 255, 255, 0.8);
}

CSS box-shadow in Tailwind CSS

Tailwind provides predefined shadow utilities (shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl, shadow-2xl) and ring utilities for outline-style shadows. For custom values, use the arbitrary value syntax:

<!-- Tailwind predefined shadows -->
<div class="shadow-lg">...</div>

<!-- Arbitrary box-shadow value -->
<div class="shadow-[0_4px_24px_rgba(0,0,0,0.1)]">...</div>

The generator outputs a ready-to-use Tailwind arbitrary class alongside the standard CSS.

Animation and Transitions

box-shadow is animatable in CSS. Transitions work best between shadows with the same number of layers — browsers can then interpolate each layer’s values:

.card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.2s ease;
}

.card:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16);
}

Performance note: box-shadow changes trigger a repaint. For 60 fps animations, prefer transitioning opacity of a pseudo-element with a blur applied, or use filter: drop-shadow() which runs on the GPU compositor thread.

Browser Support

box-shadow has full support across all modern browsers with no vendor prefixes required. It has been universally supported since IE9 (2011).

Frequently Asked Questions

How many box-shadow layers can I add? The CSS specification does not impose a limit. This tool supports up to 6 layers, which covers all practical use cases. The browser renders layers in order — the first layer appears on top.

Can I animate box-shadow? Yes. Browsers interpolate box-shadow values during CSS transitions and animations. For smooth results, keep the same number of layers between start and end states. Animating box-shadow triggers a repaint on each frame, so keep animations short or use will-change: box-shadow on animated elements.

What is the difference between box-shadow and drop-shadow filter? box-shadow applies to the element’s box (rectangle). filter: drop-shadow() follows the actual painted shape of the element, including transparency — useful for PNG images or SVGs where you want the shadow to follow the shape rather than the bounding box.

Does box-shadow affect layout or overflow? No. Shadows are visual effects that do not affect the element’s dimensions or position in the document flow. They can extend outside the element’s border-box without causing overflow scrollbars (unless overflow: hidden clips the shadow area).

How do I make a one-sided shadow? Use a large negative spread combined with a matching blur. The negative spread cancels the shadow on the sides and top, leaving only the bottom visible:

/* Bottom shadow only */
box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.3);

Does this tool send data to a server? No. All shadow generation, preview rendering, and CSS output happen entirely in your browser. No data is transmitted to any server.