A flat-looking card and a card that feels like it's floating above the page are often separated by nothing more than a well-tuned box-shadow — but getting there means understanding what each number in that property is actually doing.
The Five Values, In Order
A box-shadow declaration reads, in order: horizontal offset, vertical offset, blur radius, spread radius, and color. The horizontal and vertical offsets move the shadow left/right and up/down relative to the element. Blur radius controls how soft or hard the shadow's edge looks — zero produces a crisp, hard-edged shadow, while larger values fade it out gradually. Spread radius expands or contracts the shadow's size independently of the element itself, before blur is applied — a positive spread makes the shadow bigger than the element, a negative one shrinks it.
Why Designers Layer Multiple Shadows
In real lighting, a single object usually casts two visually distinct kinds of shadow at once: a tight, sharper shadow close to the object where light is most blocked, and a softer, more diffuse ambient shadow that spreads further out. A single box-shadow value can only approximate one of these at a time. Layering two or three comma-separated box-shadow values — one tight and dark, one soft and light — recreates that natural combination, which is why shadows in professional design systems are almost always layered rather than a single flat value.
box-shadow vs. filter: drop-shadow()
box-shadow always traces the element's rectangular box — including any corners cut away by border-radius, but not the actual visible pixels inside it. This becomes a problem for a transparent PNG icon or an oddly-shaped SVG: box-shadow would draw a rectangular shadow around the transparent parts too. filter: drop-shadow() solves this by following the real, non-transparent silhouette of the rendered content instead, which is why it's the better choice specifically for shadows behind icons, logos, and irregular shapes.
Build Your Own Shadow
Adjust offset, blur, spread, and color with a live preview in the free CSS Box Shadow Generator, then copy the ready-to-paste CSS.
FAQ
What do the numbers in box-shadow actually mean? In order, box-shadow takes: horizontal offset (positive moves the shadow right, negative left), vertical offset (positive moves it down, negative up), blur radius (how soft the shadow's edge is — 0 is a hard edge), spread radius (how much the shadow grows or shrinks beyond the element's size), and a color.
Why do designers layer multiple box-shadows on one element? A single light source in real life actually produces two distinct shadow effects — a soft, spread-out ambient shadow and a tighter, sharper direct shadow close to the object. Layering two or three box-shadow values (separated by commas) recreates that combination, which is why professionally designed shadows almost always use more than one layer instead of a single flat one.
What's the difference between box-shadow and filter: drop-shadow()? box-shadow always follows the exact rectangular (or rounded-rectangle) shape of the element's box, including any transparent corners cut by border-radius. drop-shadow() instead follows the actual visible, non-transparent shape of the element's content — which matters most for a shadow behind a PNG icon or an irregularly shaped SVG, where box-shadow would incorrectly show a rectangular shadow around transparent pixels.