HomeToolsBox Shadow

CSS WORKSPACE

Box Shadow

Make a change, inspect the result, and take the output into your project.

How to use this tool ↓

Box Shadow Generator

Layer 1 Properties
0px
10px
25px
-5px
0.1
Preview Box
css
box-shadow: 0px 10px 25px -5px rgba(0, 0, 0, 0.1), 0px 8px 10px -6px rgba(0, 0, 0, 0.1);
A PRACTICAL GUIDE

Use shadows to explain elevation

Box shadows help separate a card, popover, or modal from the surface behind it. A useful shadow communicates hierarchy: a floating dialog needs more separation than a static list item. Start with a restrained shadow and increase it only when the interface needs another elevation level.

How to use this tool

  1. Set horizontal and vertical offsets to establish the direction of the light. A small downward offset usually feels natural.
  2. Increase blur for a softer edge and adjust spread to change the size of the shadow. Keep opacity low on a light background.
  3. Add a second layer when you need a crisp contact shadow plus a wider ambient shadow. Copy the complete comma-separated declaration.

The first layer gives the card a close edge. The second adds softer depth while the negative spread keeps the shadow from covering too much surrounding space. Shadow does not reserve layout space, so leave enough gap between adjacent cards.

Read the reference documentation ↗
Example to try in your project
.card {
  box-shadow: 0 1px 3px rgb(15 23 42 / 8%),
              0 12px 28px -12px rgb(15 23 42 / 18%);
}

Before you ship

A parent with overflow: hidden can cut off a shadow. Check dark backgrounds separately; a subtle border may communicate the edge more clearly than a stronger black shadow.

Explore a related tool