Skip to content

CSS Box Shadow Generator

Set one box shadow, preview it on a test box, and copy the matching CSS declaration.

Set the box shadow

Processed in your browser.

−200 to 200 px; positive moves right.

−200 to 200 px; positive moves down.

0–200 px; negative blur is invalid.

−200 to 200 px; negative values contract.

Opaque 3- or 6-digit HEX.

0 is transparent; 1 is opaque.

Generated box shadow

Enter the shadow settings, then generate the CSS.

How to generate a CSS box shadow

Use this page for one outer or inset shadow. It produces the standard box-shadow value in the same order the browser interprets it.

  1. Enter horizontal and vertical offsets.
  2. Set a non-negative blur radius and a positive, zero, or negative spread distance.
  3. Enter the shadow HEX color and opacity.
  4. Choose Outer or Inset.
  5. Generate, inspect the test box, and copy the CSS declaration.

How the four lengths work

The first length is the horizontal offset and the second is vertical. Positive values move right and down; negative values move left and up. The third length is the blur radius and cannot be negative. Zero gives a sharp edge, while a larger value produces a wider soft transition. The fourth length is spread: positive values expand the shadow shape and negative values contract it.

Outer and inset shadows

An outer shadow is drawn behind the border box and does not change document layout. It can overlap neighboring content, so the preview area reserves space for the assigned maximum range. Adding inset changes the effect to an inner shadow clipped inside the box. The same offsets then shift the inner shadow’s appearance within the sample.

Color, opacity, and copied CSS

The color is an opaque HEX input plus a separate opacity from 0 to 1. Opacity 1 is emitted as normalized six-digit HEX; lower values become rgba(red, green, blue, alpha). The result shows the exact value applied to the test box. Editing or clearing a field removes the old preview and disables Copy until the new values are validated.

Scope and safe interpretation

  • One shadow layer only; no comma-separated stack.
  • Blur from 0–200px, offsets and spread from −200–200px.
  • No full component designer, background editor, animation, image export, or design-quality guarantee.
  • Large shadows can overlap because box-shadow does not affect layout; check the final component in its real spacing and clipping context.

Examples

12px 12px 24px 0px rgba(0, 0, 0, 0.3) makes a soft outer shadow down and to the right.

inset 0px 4px 8px -2px rgba(17, 34, 51, 0.5) places a contracted inner shadow.

Frequently asked questions

Can blur be negative?

No. CSS defines the blur radius as non-negative, so this generator rejects negative blur.

Can spread be negative?

Yes. Negative spread contracts the shadow shape and is preserved.

Why does a large shadow not move nearby content?

Box shadows are visual effects and do not participate in layout.

Can I create several layers?

Not on this focused page. It intentionally generates one shadow.