Build depth by changing one layer at a time

Start in Single mode with X at 0, a small positive Y, and no spread. Increase blur until the edge is soft enough, then adjust opacity for the surface behind the card. A dark shadow that is subtle on white can disappear on a dark background.

Switch to Layered when one shadow cannot provide both a close edge and a broad falloff. Keep the broad layer faint so it does not become a gray halo. The Soft Layer and Hard Layer labels identify the two sets of fields; their actual softness still comes from the blur values you enter.

Think of it as a light source, not four separate numbers

X and Y offset are the direction the light is coming from. A shadow that falls down and to the right reads as light from the upper left, which is the default most interfaces assume, so straying from it can make an element feel subtly wrong even when nobody can say why. Blur is how diffuse that light is: a small, sharp blur reads as a hard point source like direct sun, while a large blur reads as an overcast sky or a big soft studio light. Spread doesn't correspond to anything physical. It's a CSS-only convenience that grows or shrinks the shadow's shape before the blur is applied, useful for making a shadow reach further without also making its edge softer.

Negative spread is the one move with no light-source analogy: it pulls the shadow shape in from the box's edges, which is how you get a shadow that's narrower than the element casting it exactly what a broad, soft ambient layer needs so it doesn't peek out past the corners of a rounded card.

Two layers reads as more convincing depth than one

A single shadow can only describe one light source, but real elevation usually comes from ambient light plus a closer, more direct source. Layered mode gives you that: a broad, faint shadow with a lot of blur and negative spread for the ambient light, and a tighter, slightly stronger one closer to the edge for the direct source. Painted together, the effect reads as depth rather than as "a blurry gray blob under a box," which is what a single oversized shadow usually looks like on its own.

0px 24px 70px -24px rgba(2, 6, 23, 0.28),
0px 8px 18px -8px rgba(14, 165, 233, 0.24)

The first layer above is the ambient one. It spreads softly and sits pulled inward with negative spread. The second, tinted layer stays close to the edge and does most of the work of anchoring the card to the surface beneath it. Each layer keeps its own color and opacity; the px, rem, or em unit you pick applies to both. Turning on Inset flips the shadow to the inside of the box, which reads as a recessed or pressed-in surface instead of a raised one. This is useful for a pressed button state or a search field that should look carved into the page rather than floating above it.

Box-shadow versus filter: drop-shadow

Both draw a shadow, but box-shadow always traces the element's rectangular box (or its border-radius curve). It has no idea whether that box contains a transparent PNG with an irregular silhouette. filter: drop-shadow() does trace the actual visible pixels, including transparency, which is the one it belongs to for logos, icons, or cutout images. For ordinary cards, panels, and buttons, box-shadow is cheaper for the browser to render and is the right default.

Separate clipping from a weak shadow

If a shadow ends in a straight line at a container edge, inspect the ancestor's overflow rule before increasing blur or opacity. A clipped shadow cannot become visible outside that boundary by making it darker. Leave space around the card or adjust the clipping container in the destination layout.

Shadows do not reserve layout space. A large offset can paint over a neighboring card even though the boxes themselves do not overlap. Use spacing to make room for the effect. Box-shadow also follows the element's box and rounded corners; it does not trace the transparent silhouette inside an image.

For a crisp offset design, try X 6, Y 6, Blur 0, and Spread 0 in px. For a recessed surface, use Inset and a small offset. These produce different edge treatments, so decide whether the surface should look raised or sunken before combining layers.