CSS Box Shadow Generator

What box-shadow does

The box-shadow property draws one or more shadows around an element's box. It doesn't change the layout: the element keeps its size and position, and the shadow is painted around it. If the element has a border-radius, the shadow follows its rounded corners.

How to use the box shadow generator

1. Set the shadow's X and Y offset, Blur, Spread and Color with the sliders, or type exact values.
2. Check Inset to draw the shadow inside the box.
3. Use "Add a new box shadow" to stack another layer. Each layer has its own controls and can be removed.
4. Copy the CSS from the code panel.

box-shadow syntax

box-shadow: 0 4px 12px 0 rgb(0 0 0 / 0.15);

The values, in order:

• Offset X. Positive values move the shadow right, negative values left.
• Offset Y. Positive values move it down, negative values up.
• Blur radius (optional). 0 gives a sharp edge, and larger values a softer one. It can't be negative.
• Spread radius (optional). Positive values grow the shadow and negative values shrink it, which keeps a blurred shadow tucked under the element.
• Color (optional). Without one, the shadow uses the text color. A semi-transparent black usually looks most natural.
• inset (optional). Draws the shadow inside the box.

Only the two offsets are required: box-shadow: 2px 2px is a valid shadow, with no blur, in the text color.

Inset shadows

The inset keyword moves the shadow inside the box, so it looks pressed in, like a text field or a button being clicked. An inset shadow sits above the element's background but below its content.

box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.2);

Layered shadows

Separate shadows with commas, and the first one is drawn on top. Pairing a small, sharp shadow with a large, soft one looks more like real light than a single big blur:

box-shadow:
  0 1px 2px rgb(0 0 0 / 0.12),
  0 8px 24px rgb(0 0 0 / 0.12);

Box shadow examples

Eight shadows to copy or to recreate in the generator and adjust.

box-shadow:
  0 1px 3px rgb(0 0 0 / 0.12),
  0 1px 2px rgb(0 0 0 / 0.08);

box-shadow: 0 10px 30px -5px rgb(0 0 0 / 0.2);

box-shadow:
  0 1px 2px rgb(0 0 0 / 0.06),
  0 12px 32px -8px rgb(0 0 0 / 0.25);

box-shadow: 6px 6px 0 #111827;

box-shadow:
  0 0 0 1px rgb(99 102 241 / 0.4),
  0 8px 24px rgb(99 102 241 / 0.45);

box-shadow: inset 0 2px 6px rgb(0 0 0 / 0.25);

box-shadow:
  8px 8px 16px #c8ccd2,
  -8px -8px 16px #ffffff;

box-shadow: 0 0 0 3px rgb(99 102 241 / 0.5);

box-shadow vs drop-shadow()

box-shadow follows the element's box. filter: drop-shadow() follows the shape of what's drawn, such as a transparent PNG, an SVG icon or text, so the shadow traces the visible pixels. drop-shadow() has no spread and no inset. For several shadows, chain several drop-shadow() functions.

filter: drop-shadow(0 4px 8px rgb(0 0 0 / 0.25));

For depth that comes from color rather than shadow, try a subtle background from the CSS gradient generator.

Frequently asked questions

box-shadow: 0 8px 6px -6px rgb(0 0 0 / 0.3);