Box Shadow Generator
Build a box-shadow that reads as light rather than a smudge.
What you provide
Result
12px shadow, 15% opacity
Shadows work best when the light source is consistent across the page, which in practice means every shadow has a positive vertical offset and no horizontal one. If a card needs more depth, stack shadows rather than darkening one: a tight low-opacity shadow for the edge plus a wide faint one for the ambient falloff gives a much better result than a single heavy shadow.
Preview
0px 4px 12px rgb(0 0 0 / 15%)
box-shadow: 0px 4px 12px rgb(0 0 0 / 15%);
- Offset
- 0px, 4px
- Blur
- 12px
- Spread
- 0px
- Colour
- rgb(0 0 0 / 15%)
- Opacity
- 15%
- Type
- outer
What this cannot tell you
- Generates CSS in your browser from the values you set. It does not touch your stylesheet or your site.
- The preview is a rough approximation. Shadows read differently against different backgrounds and at different sizes, so check the result in place before settling on it.
Take this with you
How this calculation works
The four length values and the colour are assembled into a box-shadow declaration, with the colour converted to modern rgb syntax so opacity can be set separately from the swatch. Two checks run alongside: opacity above roughly 40% reads as a dark band rather than a shadow, and a blur smaller than the vertical offset produces a hard edge. Neither is an error, since both are legitimate styles, but both are usually accidents.
What the results mean
- Blur
- How soft the edge is. This is the value that decides whether a shadow looks like light or like a border, and it usually wants to be around three times the vertical offset.
- Spread
- Grows or shrinks the shadow before blurring. A small negative spread with a large blur gives a tight, natural falloff.
- Inset
- Draws the shadow inside the box instead of outside, which is how pressed buttons and inset wells are made.
Common problems and fixes
- The shadow looks like a grey box rather than a shadow
- Lower the opacity and raise the blur. Real shadows are faint and soft, so most interface shadows sit between 8% and 20% opacity with a blur several times larger than the offset. If it still looks flat, stack two shadows in one declaration: a tight one at low opacity for the contact edge, and a wide faint one for the ambient falloff.
- The shadow disappears on a dark background
- Black on near-black has almost nothing to work with. On dark interfaces, depth usually comes from a subtle light border or a lighter surface colour rather than a shadow, since that is how depth actually reads in a dark room. If you keep the shadow, increase the blur and accept that it will be doing less work than it does on a light background.
Frequently asked questions
What is the difference between blur and spread?
Spread changes the size of the shadow shape before it is blurred, growing or shrinking it in every direction. Blur softens the edge of whatever shape results. A positive spread with no blur gives a hard outline offset from the box, which is occasionally what you want and usually not.
Can I use more than one shadow?
Yes, and it is how the better-looking interfaces do it. Comma-separate several shadows in a single declaration and they stack, with the first one painted on top. Two or three at increasing blur and decreasing opacity approximate how light actually falls far better than one.
Does box-shadow affect layout?
No. Shadows are painted outside the box and take no space, so they never push neighbours around and never trigger a reflow. They can be expensive to paint though, so a page with many large blurred shadows animating at once is worth checking on a slower device.
Put this on your own site
Free to embed, no attribution required beyond the source link the frame carries itself. It runs entirely in your visitor's browser, sets no cookies and loads no third-party script.
<iframe src="https://runthetests.com/embed/box-shadow-generator/" width="100%" height="560" style="border:1px solid #e5e5e5;border-radius:8px" title="Box Shadow Generator" loading="lazy"></iframe>
Preview it at https://runthetests.com/embed/box-shadow-generator/. Embedded pages are marked noindex, so yours stays the canonical copy — not this one.