Box Shadow Generator

A shadow, and the line of CSS that makes it.

A shadow, and the line of CSS that makes it.

How to use it

  1. Set the offset and blur. Downward offset with a soft blur is the usual starting point for a card.
  2. Add spread if you need it. Spread grows the shadow before it blurs. A negative value pulls it in.
  3. Copy the CSS. One line, under the preview. Zero spread is left out of it.

When you would use this

A box shadow has four numbers and a colour, and the reason generators exist for it is that the numbers interact in ways that are hard to hold in your head. Blur softens, spread resizes, and the two together decide whether a card looks like it is resting on the page or floating well above it. The part most tools get wrong is the preview. A CSS blur radius is defined as twice the standard deviation of the Gaussian used to draw it, so a preview that feeds the blur value straight into a blur filter renders it about twice as soft as the real rule. This halves it, which is why what you see here matches what your stylesheet does. Inset is the other place things go wrong. An inset shadow is not an outset one moved inwards, it is the inverse shape clipped to the box, and it needs to be drawn that way to look right. The colour comes back exactly as you typed it. If you wrote an rgba value that is what lands in your stylesheet, not the hex equivalent, because those are not the same thing to someone maintaining the file later.

Questions

Why does the preview match when other generators do not?
Because the blur is converted properly. A CSS blur radius is twice the standard deviation of the Gaussian that draws it, so the preview halves the number. Passing it straight through, which is the easy mistake, gives a preview about twice as soft as the rule.
What does spread actually do?
It grows or shrinks the shadow shape before the blur is applied. A positive value makes the shadow larger than the box, a negative one pulls it inside, which is how you get a tight shadow that does not leak out at the sides.
Can I have more than one shadow?
Not from this page. CSS accepts a comma separated list, so you can generate each one here and join them with commas. The first in the list draws on top.