CSS Box Shadow Generator

How the CSS box-shadow Property Works

The box-shadow property attaches one or more shadows to an element's frame. A single shadow is written as a short list of values: an optional inset keyword, a horizontal offset, a vertical offset, a blur radius, a spread radius, and a color. Everything after the two offsets is optional, which is why so many shadows in the wild look flat and generic. Understanding each value is the difference between a shadow that reads as depth and one that reads as a gray box.

The full syntax is box-shadow: [inset] offset-x offset-y blur spread color. This generator exposes every one of those values as a slider and a number field so you can see the effect of each change instantly, then copy the exact declaration into your stylesheet.

Offset X and Offset Y

The first two length values set the horizontal and vertical offset of the shadow. Positive offset-x pushes the shadow to the right, negative pushes it left. Positive offset-y pushes the shadow down, negative pushes it up. A shadow with both offsets at zero sits perfectly centered behind the element, which is the basis of a glow effect. Real-world light usually comes from above, so most natural shadows use a small positive offset-y and little or no offset-x.

Blur Radius

The third value is the blur radius. A blur of 0 produces a hard, sharp-edged shadow like a solid duplicate of the element. Larger blur values soften and spread the edge, producing the diffuse falloff that makes a shadow feel like it belongs to a real light source. Blur radius cannot be negative. As a rule of thumb, the blur should be roughly double the vertical offset for a believable soft shadow.

Spread Radius

The fourth value is the spread radius, and it is the one most developers forget exists. A positive spread grows the shadow in every direction before the blur is applied, making it larger than the element. A negative spread shrinks the shadow, which is a powerful trick for creating a tight, contained shadow that only peeks out from one edge. Combining a positive vertical offset with a negative spread produces the subtle "lifted card" look used across modern interfaces.

The Shadow Color and Opacity

The final value is the color. Pure black at full opacity almost never looks right. Real shadows are semi-transparent and often carry a hint of the surrounding hue. This tool outputs every color as an rgba() value with an opacity slider so you can dial the shadow back to the 10 to 25 percent alpha range where believable shadows live. For colored glows, raise the opacity and pick a saturated hue instead of black.

Inset Shadows

Adding the inset keyword draws the shadow inside the element's border box instead of outside it. Inset shadows are how you create pressed buttons, inset form fields, inner glows, and recessed panels. The offset and blur values work the same way, but the shadow now falls on the interior of the element. You can freely mix inset and outset shadows in the same declaration.

Stacking Multiple Shadows

The real power of box-shadow is that it accepts a comma-separated list of shadows. Each shadow in the list is painted independently, and earlier shadows in the list render on top of later ones. This is the single most important technique for realistic depth: instead of one heavy shadow, professional designers layer several light shadows at increasing blur and offset. The result is a smooth, natural falloff that a single shadow can never reproduce.

A typical layered shadow uses three to six layers. The tightest layer sits close to the element with a small offset and low blur to define the contact edge. Each subsequent layer increases the offset and blur while decreasing the opacity, mimicking how ambient light scatters. The Presets tab in this tool includes several ready-made layered shadows you can load and study.

Material Design Elevation

Google's Material Design system formalized layered shadows into an elevation scale. Each elevation level from 1dp to 24dp maps to a specific combination of shadow layers: an umbra (the darkest, tight contact shadow), a penumbra (the mid-range soft shadow), and an ambient shadow (the widest, faintest layer). Reproducing these by hand is tedious, which is exactly why the elevation presets in this tool ship the exact three-layer values for common elevation steps.

Neumorphism and Soft UI

Neumorphism, or soft UI, is a style built entirely on paired box-shadows. An element gets one light shadow offset toward the light source and one dark shadow offset away from it, both against a background of the same color as the element. The effect makes controls look extruded from or pressed into the surface. Because it depends on precise matching shadow pairs, it is a natural fit for a generator: the neumorphism preset computes the light and dark pair for you.

Box Shadow vs Drop Shadow

box-shadow follows the rectangular border box of an element, including its border-radius. If you need a shadow that follows the actual shape of a non-rectangular element, such as a PNG with transparency or a clipped shape, you need the filter: drop-shadow() function instead. For standard cards, buttons, modals, and panels, box-shadow is the correct and more performant choice because it does not force the browser to trace the element's alpha channel.

Performance Considerations

Shadows are painted by the compositor and are generally cheap, but very large blur radii across many layered shadows on many elements can add up on low-powered devices. If you animate a shadow, animate opacity on a pseudo-element holding the shadow rather than animating the box-shadow value directly, since animating blur and spread forces expensive repaints on every frame. For static shadows, layer freely: the paint cost of a stacked shadow at rest is negligible.

Browser Support

box-shadow is supported in every browser in use today, including all versions of Chrome, Firefox, Safari, and Edge, and has been unprefixed since 2011. Inset shadows, spread radius, and multiple comma-separated shadows are all part of the same universally supported specification. You can use everything this generator outputs without a fallback or a vendor prefix.