CSS Box Shadow Generator

Tune shadow geometry, color and opacity while viewing the result live.

Shadow settings

Preview only. Shadow perception changes with background and nearby elements.

Shadow result

Preview box

About the CSS Box Shadow Generator

Compose a box-shadow declaration by adjusting each numeric component and an RGBA color.

How to use it

  1. Set horizontal and vertical offsets.
  2. Adjust blur, spread, color, opacity and optional inset.
  3. Review the box and copy the generated declaration.

Property order

The generated value follows offset-x, offset-y, blur-radius, spread-radius and color, with inset added at the start when selected.

Example

A soft card shadow can use 0px 10px 25px 0px with a low-opacity black color.

Notes

Generated CSS may need adjustment for your layout, background contrast and performance goals.