Skip to content
ToolBoxGeniehome

Box Shadow Generator

Developer Tools ยท Added

Set the offset, blur, spread and colour and watch the shadow change on a real element. The part that matters is stacking: a single shadow layer reads as a grey smudge, while two โ€” one tight and dark for the contact edge, one wide and faint for the ambient cast โ€” reads as depth. This builds either, plus inset shadows and the spread-only trick behind focus rings.

Preview
Layers โ€” the first one paints on top
Layer 1

Positive moves right

Positive moves down

0 gives a hard edge

Grows or shrinks the shadow

A translucent colour reads better than a light grey โ€” it tints whatever is behind it instead of sitting on top as a flat patch.

CSS

box-shadow: 0px 4px 12px -2px rgba(15, 23, 42, 0.15);

Subtle border: A one-pixel shadow used instead of a border, so it does not affect layout.

Card: Two layers: a close contact shadow and a softer ambient one.

Raised: For a menu or popover โ€” far enough off the surface to read as floating.

Inset well: An inner shadow, which is what makes an input look recessed.

Focus ring: A spread-only shadow with no blur โ€” a visible focus indicator that costs no layout.

A box-shadow paints outside the element and never affects layout, which is why it is the right way to draw a focus ring or a hairline border that must not shift anything. It is also drawn on every paint, so a very large blur across many elements is one of the few CSS properties that can genuinely cost frames on a slow device.

How to use the box shadow generator

  1. 1Adjust the horizontal and vertical offsets to set where the light is coming from. Real light is usually above, so a small positive vertical offset is the common case.
  2. 2Set the blur, and the spread if you want the shadow larger or smaller than the element.
  3. 3Choose a translucent colour rather than a light grey โ€” it tints what is behind it instead of sitting on top as a flat patch.
  4. 4Add a second layer for depth: keep the first tight and dark, and make the second wide and faint.
  5. 5Tick Inset for an inner shadow, then copy the declaration.

Examples

A card

Input
Two layers, both dark and translucent
Result
box-shadow: 0px 1px 3px 0px rgba(15, 23, 42, 0.1), 0px 8px 24px -4px rgba(15, 23, 42, 0.12);

The first layer is the contact edge, the second the ambient cast. One layer alone cannot do both.

A focus ring

Input
No offset, no blur, 3px spread
Result
box-shadow: 0px 0px 0px 3px rgba(37, 99, 235, 0.45);

A spread-only shadow is a ring that costs no layout, which a border would.

A recessed input

Input
Inset, 2px down, 4px blur
Result
box-shadow: inset 0px 2px 4px 0px rgba(15, 23, 42, 0.12);

About the box shadow generator

Reading the syntax

The values run in a fixed order: horizontal offset, vertical offset, blur, spread, colour. Only the offsets are required, which is why so many shadows in the wild are two numbers and a colour. The optional inset keyword goes at the front and moves the shadow inside the element.

Multiple shadows are comma separated, and the first one paints on top. That ordering matters when layers overlap at different opacities โ€” putting the tight dark layer last buries it under the faint one and loses the effect.

Shadows as an interface signal

In most interfaces the shadow is not decoration, it is a statement about layering: this element is above the page, and probably temporary. A dropdown, a modal and a tooltip all carry heavier shadows than a card for that reason, and a permanent piece of page furniture generally should not float at all.

The corollary is consistency. Two elements at the same conceptual level should carry the same shadow, and a set of arbitrary hand-tuned shadows across a site reads as sloppiness even when no individual one looks wrong. Picking three โ€” resting, raised, floating โ€” and reusing them is what design systems do.

Shadows in dark mode

A black shadow on a dark background does almost nothing, because there is no lightness left to remove. This is the most common reason a design that looks crisp in light mode looks flat when inverted.

The usual answers are to raise the surface colour instead of deepening the shadow โ€” lighter surfaces read as closer, which is what material design does โ€” or to keep a shadow for the contact edge and add a subtle light border to define the top. Copying the light-mode shadow values across is the one approach that reliably does not work.

Frequently asked questions

What is the difference between blur and spread?
Blur softens the shadow edge without changing where it ends; spread grows or shrinks the whole shadow before it is blurred. A negative spread pulls the shadow in, which is how you get a shadow that peeks out below an element without spilling out at the sides โ€” the combination that makes a card look like it is resting on the page.
Why do professional shadows use several layers?
Because real shadows are two things at once: a dark, tight contact shadow where the object nearly touches the surface, and a wide, faint ambient one further out. A single layer must choose between them, and the result is either a hard band or a diffuse haze. Two or three layers with increasing blur and decreasing opacity is what design systems use, and it is why their shadows read as depth.
Should a shadow be grey or translucent?
Translucent, essentially always. A solid grey shadow assumes a white background and looks wrong on anything else, while rgba lets whatever is behind it show through and tint it. It also composites correctly when shadows overlap, which grey does not.
What is the difference from filter: drop-shadow?
box-shadow follows the element's box, including its border radius, so it is right for cards, buttons and inputs. filter: drop-shadow follows the shape's alpha channel, so it traces the outline of a transparent PNG or an irregular SVG rather than the rectangle around it. Use box-shadow for boxes and drop-shadow for shapes.
Can shadows slow a page down?
Occasionally, yes โ€” which is unusual for a CSS property. A very large blur radius across many elements is expensive to paint, and it is re-painted whenever the element changes. It rarely matters for a handful of cards, and it can matter on a long list on a low-end phone. If a scroll is janky and every row has a wide shadow, that is worth testing.

Related tools