CSS Box Shadow Generator

box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);

CSS Box Shadow Syntax

The box-shadow property accepts one or more shadow definitions, each with up to six values: inset offset-x offset-y blur-radius spread-radius color. The inset keyword is optional and moves the shadow inside the element. Offset values can be negative to cast shadows left or upward.

Layering Multiple Shadows

Comma-separate multiple shadow definitions to stack them. A common technique uses two layers: a tight, darker shadow for definition and a larger, lighter shadow for depth. Material Design elevation classes rely on this pattern to simulate physical height above a surface. For more CSS visual tools, try the CSS Gradient Generator.

Inset Shadows

Adding the inset keyword flips the shadow to the inside of the element. Inset shadows create the illusion of depth — a sunken well or pressed button. Combine an inset shadow with a regular outer shadow to produce realistic 3D effects. Input fields and text areas frequently use subtle inset shadows to look recessed into the page surface.

Spread Radius

Spread controls the size of the shadow before blurring. A positive spread expands the shadow beyond the element's edges. A negative spread shrinks it, creating a tight glow effect that doesn't extend past the element boundary. Setting blur to 0 and spread to a small positive value (3-5px) creates a solid border-like shadow, which renders on a separate layer from actual CSS borders and can overlap other elements cleanly. Use the Color Converter to get shadow color values in HEX, RGB, or HSL.

Performance Considerations

Box shadows trigger paint operations in the browser but do not cause layout recalculation. Animating box-shadow directly is expensive — if you need animated shadows, transition the opacity of a pseudo-element that already has the shadow applied. For static shadows (no animation), performance impact is negligible on modern hardware.