Understanding CSS box shadows
The box-shadow property draws a shadow around an element's box. Shadows suggest depth: a card with a soft shadow looks raised off the page, and a stronger one looks closer to you. Writing the values by hand takes a lot of trial and error, so this generator lets you tune them visually and copy the result.
The syntax
box-shadow: [inset] x-offset y-offset blur spread color;- Horizontal and vertical offset move the shadow. Positive values push it right and down, which matches light coming from above.
- Blur softens the edge. Zero gives a hard edge; larger values spread the fade over more pixels. It can't be negative.
- Spread grows or shrinks the shadow before it is blurred. A negative spread with a large blur keeps the shadow tucked under the element, which is how most modern UI shadows look natural.
- Colour is usually black or a dark tone at low opacity. Using
rgba()lets the background show through so the shadow works on any surface. - inset draws the shadow inside the box instead, useful for pressed buttons and input fields.
Layering shadows
You can list several shadows separated by commas, and the first one is drawn on top. Real shadows have a dark, tight core and a wide, faint outer area, so combining a small sharp shadow with a large soft one looks more convincing than any single shadow. The Smooth preset stacks five layers that each double the previous offset and blur.
Using the Tailwind output
Tailwind CSS accepts any shadow through an arbitrary value class such as shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1)]. Spaces become underscores and the commas between layers stay as they are. Paste it straight into a className.
Tips
- Keep opacity low (5–20%) for interface shadows. Heavy, dark shadows look dated.
- Use the same light direction for every shadow on a page so elements feel consistent.
- A coloured glow (zero offset, bigger blur, a bit of spread) works well for focus states and highlighted buttons.
- Shadows don't affect layout, so they never push neighbouring elements around.
