A box shadow is a copy of the element's border box, pushed sideways, softened, and painted behind the element. Add the inset keyword and the same shadow is cast inward instead, as if the box were hollow and lit from outside. Either way it costs no layout at all: no space is reserved for a shadow, siblings do not move, and deleting the declaration changes nothing except pixels. That is why shadows are the standard way to fake depth on the web — one line of CSS instead of a wrapper element and a transform.
The shadow is generated from the border box, so it follows border-radius automatically. Give a card 16px corners and its shadow is rounded to match, with no extra work and no visible seam where the two meet.
Written out in full the property is box-shadow: offset-x offset-y blur-radius spread-radius color, with inset permitted at either end of the list.
| Value | What it controls | Range here |
|---|---|---|
| Offset X | Horizontal displacement. Positive moves the shadow right, negative moves it left. Light coming from the upper left is the convention, so this is usually small or zero. | -100 to 100 px |
| Offset Y | Vertical displacement. Positive moves it down, which is what the eye reads as "this element sits above the page". | -100 to 100 px |
| Blur | The softening radius. At 0 the shadow is a hard-edged duplicate of the box; larger numbers spread the falloff over more pixels. A negative value is invalid CSS and the whole declaration is dropped. | 0 to 250 px |
| Spread | Grows the shadow in every direction before the blur is applied. Negative shrinks the silhouette, which is how you stop a shadow leaking out sideways under a narrow element. | -100 to 150 px |
| Color | A hex colour plus an opacity slider. Under 100% the generator writes rgba(r, g, b, a); at 100% it writes the hex unchanged. | any hex, 0 to 100% |
| Inset | Flips the shadow to the inside of the box, for wells, pressed buttons and inner edges. | on or off |
If you hand-write a declaration and leave the colour out entirely, CSS falls back to currentColor and the shadow takes the element's text colour. Occasionally useful, usually a surprise.
The generator opens on its Subtle preset. That preset is:
box-shadow: 0px 8px 24px -8px rgba(15, 23, 42, 0.15);
Read left to right: there is no horizontal offset, so the shadow sits straight below the box rather than leaning to one side. It is pushed down 8px, which is the gap that separates the card from the surface it rests on. It is blurred over 24px, far enough that no hard edge survives. Then spread pulls the whole silhouette in by 8px on every side, so a 130px card casts a shadow roughly 114px wide and nothing bleeds out around the flanks where a real light source would not reach. Finally the colour: dark slate at 15% opacity. Full-strength black would read as a hole punched in the page — light scatters, so a believable shadow is nearly transparent.
The property accepts a comma-separated list of shadows, which is where hand-written shadows start to look professional. The generator emits one at a time, so paste the output twice and edit:
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 12px 32px -8px rgba(15, 23, 42, 0.18);
The first is tight and barely visible and reads as the contact edge where the card meets the surface. The second is broad and diffuse and reads as ambient occlusion. The first shadow in the list is painted on top, so list order decides which one wins wherever they overlap.
overflow: hidden, auto or scroll cuts the shadow off at its own box. Carousels, scroll panels and rounded card wrappers are the usual culprits.box-shadow is not a composited property. To make a card lift on hover, transition transform and opacity instead, or swap between two pre-built shadows rather than animating the blur radius.Yes, comma-separated, with no practical limit. The generator writes a single shadow because its controls describe one; run it twice with different values and combine the two results by hand.
They should not, if the radius and the shadow are on the same element — the shadow is drawn from the border box and inherits the curve. Square shadow corners mean the radius is on an inner element while the shadow is on the outer one, or a background colour is covering the rounded part.
Yes. The unprefixed property, including inset and comma-separated lists, has been supported in Chrome, Firefox, Safari and Edge for well over a decade. No prefix and no fallback is needed.
Blur softens the edge, spread moves it. Spread grows or shrinks the shadow's silhouette before blurring happens, so it changes how large the shadow is; blur only changes how gradually it fades out.
Rarely. Pure black at low opacity looks muddy against a light interface. A very dark version of the page's own hue reads as natural shadow — the default here is slate #0f172a — while a saturated colour at 40 to 50% opacity makes a deliberate glow instead of a shadow.