How to Create a CSS Box Shadow

A good shadow is barely noticed. It lifts a card off the page without drawing a heavy outline. A bad one looks like a 2005 drop shadow.

The five values

• Offset X moves the shadow right (positive) or left (negative).
• Offset Y moves it down (positive) or up.
• Blur softens the edge. Zero is a hard edge.
• Spread grows or shrinks the shadow before blurring.
• Colour usually works best as a translucent black.

Entering 0, 4, 12, 0 and rgba(0,0,0,0.2) in the Box Shadow Generator gives:

box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.2);

Inset shadows

Tick inset to draw the shadow inside the element, as for a pressed button or an input field.

Using the tool

1. Enter the offsets, blur, spread and colour.
2. Tick inset if needed.
3. Copy the CSS and add it to your rule.

Keeping it tasteful

• Use low opacity, 0.1 to 0.25, and a moderate blur for cards.
• A slightly larger vertical offset than horizontal reads as light coming from above.
• Use the same shadow style across the site so elevation feels consistent.
• Do not rely on a shadow alone to separate content; add a border for people who cannot see subtle contrast.

Frequently asked questions