Box Shadow Generator
Build a CSS box shadow or text shadow from the offsets, blur, spread and colour, and see how much room it needs.
Results
What this tool does
A box shadow is four numbers and a colour in an order nobody remembers, and the difference between a shadow that lifts a card off the page and one that looks like a smudge is usually one of them. Set the values here and the line comes back ready to paste, with the transparent colour written out properly. The reach figures tell you how much space the shadow needs around the box, which is what decides whether it survives inside a tight grid.
Formula
box-shadow takes offset, blur, spread and colour ; text-shadow has neither spread nor inset
Variables
| Symbol | Meaning | Unit |
|---|---|---|
kind | Shadow on | — |
x | Sideways | px |
y | Downwards | px |
blur | Blur | px |
spread | Spread | px |
color | Shadow colour | — |
alpha | How solid it is | — |
inset | Inside instead of outside | — |
OUT | The CSS | — |
VA | Just the value | — |
RE | How far it reaches out | px |
RL | Room needed on the left | px |
RB | Room needed below | px |
CL | Shadow colour | — |
Worked example
- Shadow onbox
- Sideways0 px
- Downwards4 px
- Blur12 px
- Spread-2 px
- Shadow colour#17191f
- How solid it is0.18
- Inside instead of outsideno
- The CSSbox-shadow: 0px 4px 12px -2px rgba(23, 25, 31, 0.18);
- Just the value0px 4px 12px -2px rgba(23, 25, 31, 0.18)
- How far it reaches out4.0 px
- Room needed on the left4.0 px
- Room needed below8.0 px
- Shadow colourrgba(23, 25, 31, 0.18)
Frequently asked questions
What is the difference between blur and spread?
Spread makes the shadow bigger before it is blurred, as though the box casting it had grown; blur then softens the edge outwards from wherever that shape ends. A negative spread is the trick behind most good shadows: it pulls the shape in so the soft edge sits under the box rather than poking out at the sides, which is what makes a card look lifted rather than outlined. Text shadows have no spread at all.
What does the reach figure tell me?
How far the shadow extends past the edge of the box, which is the space you have to leave around it. Half the blur plus the spread, adjusted by the offset on each side. If the reach below is larger than the margin under your card, the shadow will be clipped by whatever comes next, and the usual symptom is a shadow that looks fine alone and truncated in a grid.