CSS Box Shadow Generator

Design CSS box shadows with several layers, inset shadows, and transparent colors, see the result on a card, and copy the box-shadow CSS.

Updated
Runs in your browser. Your data is not uploaded.
Preview
CSS

How to use the Box Shadow Generator

  1. Start from a preset or adjust Shadow layers: X offset, Y offset, Blur, Spread, Color, and Opacity. Tick Inset for an inner shadow.
  2. Add layers for a more natural shadow, and set the Box color and corner radius to match your design.
  3. Press Copy CSS.

How it works

Each layer is [inset] x y blur spread color:

  • x and y move the shadow right and down (negative values go left and up).
  • blur softens the edge; it can't be negative.
  • spread grows or shrinks the shadow before blurring.
  • Layers are separated by commas and drawn in order, the first on top. Several soft layers with low opacity look more like real light than one dark shadow.

Examples

.card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.08),
    0 4px 8px 0 rgba(0, 0, 0, 0.08),
    0 16px 32px 0 rgba(0, 0, 0, 0.12);
}

The Hard offset preset, 8px 8px 0 0 #1e2329, gives a flat, retro look with no blur.

Limitations

  • Large blurs on many elements can slow scrolling on low-end phones. Keep them for a few key elements.
  • box-shadow follows the element's box. For shadows that follow transparent PNG shapes, use the CSS Filter Generator's drop-shadow.

Frequently asked questions

What is the difference between blur and spread?

Spread makes the shadow bigger or smaller with a hard edge; blur softens that edge. A 0 blur with spread gives an outline-like shadow.

How do I make an inner shadow?

Tick Inset on a layer. The shadow is drawn inside the box, as if the surface were pressed in.

Why use several shadow layers?

Real shadows are sharp and dark close to an object and soft far away. Stacking a small tight shadow with a large faint one imitates that.

Is anything uploaded?

No. The CSS is built in your browser.

Often used together with the Box Shadow Generator.