Box Shadow

What it's for

Design the shadow of a box, or of text, and copy the CSS. A shadow is a blurred copy of the shape, pushed across and down. Several layers together, a tight dark one under a wide faint one, look more natural than a single shadow.

For example, when you’re styling a card, build a soft two-layer shadow here, watch it on a page colour like yours, and copy the box-shadow line.

How to use it

Choose box-shadow or text-shadow. Each shadow is a layer: pick one by its Layer number, then set how far it is pushed across and down, its blur, its spread (how much bigger or smaller than the shape), its colour and opacity, and whether it’s inset (drawn inside the box). Text shadows have no spread or inset.

Add a layer copies the selected one just below it. Remove this layer, Move up and Move down do what they say; the first layer is drawn on top. The All layers box lists every layer one to a line and can be edited directly. Page colour and Shape and text colour only change the preview. The layers, colours and mode are remembered in this browser.

Example

Paste this into All layers:

0 1 3 0 #000000 0.2
0 8 24 -4 #000000 0.25

The CSS box then shows:

box-shadow:
  0 1px 3px 0 rgb(0 0 0 / 20%),
  0 8px 24px -4px rgb(0 0 0 / 25%);

Good to know

Colours are a #rrggbb colour and an opacity, so a shadow can’t be written as a named colour or in hsl() here. It writes box-shadow and text-shadow only, not filter: drop-shadow(), which follows the outline of a transparent picture. The preview shows how your browser draws it; shadows on very large blurs can look different elsewhere.