CSS Box Shadow Generator: Layered & Inset Shadows

The five numbers in a box-shadow

A shadow is written as offset-x offset-y blur spread color, with an optional inset keyword in front. Offset-x moves the shadow right (negative goes left). Offset-y moves it down (negative goes up). Blur softens the edge; 0 gives a hard, cut-out shadow. Spread grows or shrinks the shadow before it is blurred. Color sets the tint and, with an alpha value, the strength.

Spread is the one people skip, and it is the secret to good shadows. A negative spread pulls the shadow in from the edges, so a big blur does not leak out the sides. That is how you get a shadow that sits under a card instead of haloing around it.

Why layered shadows look real

A single shadow looks flat because real light does not work that way. An object close to a surface casts a tight, dark contact shadow plus a wide, faint ambient one. You can stack as many shadows as you like in one box-shadow, separated by commas, and the browser paints them first-on-top.

The Soft preset shows the pattern: a 1px tight shadow for the contact edge, a medium one, and a large, low-opacity one with negative spread for the ambient falloff. Each layer is weak, around 6 to 18 percent opacity. Together they read as depth. Most design systems, Tailwind and Material included, build their elevation scales this way.

A rule of thumb for elevation: as an element rises, increase the y offset and blur together, keep the blur roughly double the offset, and lower the opacity slightly. Higher things cast bigger, softer, lighter shadows.

A worked example: a floating modal

Start from Floating: 0 24px 48px -12px at 35 percent. The negative spread keeps the shadow off the sides so the modal looks lifted rather than glowing. Add a second layer at 0 1px 2px 0 at 8 percent to define the bottom edge. Copy the output and you have box-shadow: 0 24px 48px -12px rgba(15, 23, 42, 0.35), 0 1px 2px 0 rgba(15, 23, 42, 0.08).

Tint the shadow. Pure black shadows look dirty on colored backgrounds. Use a very dark version of the background hue instead: a dark navy on a blue page, a dark brown on a warm one. The defaults here use slate-900, which works on most neutral UIs.

Inset shadows and neumorphism

The inset keyword draws the shadow inside the box instead of outside. It is how you make pressed buttons, input wells and sunken panels. An inset shadow with a small y offset at the top reads as a recess lit from above.

Neumorphism pairs a dark shadow on one side with a light one on the other, on an element the same color as its background. The Neumorphic preset sets the box and background to match, because the effect disappears otherwise. It looks slick in a Dribbble shot and fails accessibility in real products: the edges have almost no contrast, so buttons stop looking like buttons. Use it for decoration, not controls.

Performance and pitfalls

Big blurs cost paint time, and animating box-shadow repaints on every frame. For hover lifts, put the shadow on a pseudo-element and animate its opacity instead, which the compositor handles cheaply. For a handful of static cards it does not matter.

Shadows do not take up layout space. They can overlap neighbors and get clipped by a parent with overflow: hidden. If your shadow is cut off, give the parent padding or move overflow: hidden to an inner wrapper.

box-shadow follows border-radius but ignores transparent pixels. For a PNG icon or an irregular shape, use filter: drop-shadow() instead, which traces the actual alpha outline.

Dark mode needs its own values. Dark shadows on a dark background vanish. Designs often switch to a lighter border or a faint outer glow in dark mode, or raise the surface color instead of casting a shadow at all.