What do the box-shadow values mean?

In order: horizontal offset, vertical offset, blur radius, spread radius and colour, with an optional inset keyword. Offsets move the shadow, blur softens its edge, spread grows or shrinks it before blurring, and inset draws it inside the element rather than outside.

What is the difference between blur and spread?

Spread changes the size of the shadow shape before any softening, so a positive spread makes it larger than the element and a negative one smaller. Blur softens the edge of whatever shape results. A negative spread with a generous blur is how you get a shadow that is tighter than the element and still soft.

Why do professional shadows use several layers?

Because real shadows are not uniform. A tight dark layer near the element plus a larger diffuse layer further out reproduces how light actually falls, and reads as depth rather than as a grey outline. Material design elevation levels are specified with multiple shadows for exactly this reason.

How many shadow layers can I stack?

CSS accepts a comma-separated list of any length, and the generator stacks them into one declaration. In practice two or three layers achieve the effect; beyond that the visual return is small and the paint cost grows.

Should shadows be black?

Usually not pure black. A dark, desaturated version of the surface or brand hue looks more natural, because a real shadow takes on the colour of its surroundings. Pure black at low opacity reads as grey and can flatten a colourful interface.

Drawing the shadow inside the element, which makes it look recessed rather than raised. It is how pressed button states, inset wells and the subtle depth of input fields are done. Combining an inset shadow with an outer one gives both a rim and elevation.

How do I make a glow?

Use no offset, a generous blur and a saturated colour. Repeating the same colour at two or three increasing blur radii intensifies it. This is the basis of neon-style effects, and it is the same property doing the work as an ordinary shadow.

Does box-shadow affect layout?

No. Shadows are painted outside the element box and do not take up space, so adding one never pushes neighbouring content around. That is the main practical difference from adding a border, which does affect layout unless you compensate.

Are large shadows a performance problem?

They can be when animated. A big blurred shadow is relatively expensive to paint, so transitioning it on many elements at once, such as a grid of cards on hover, may drop frames. Animating the opacity of a pseudo-element that carries the shadow is the usual way to keep it smooth.

Is anything I configure sent to a server?

No. The preview and the generated CSS stay in your browser, and nothing you enter is transmitted, stored or logged.

CSS Box Shadow Generator – Layered Shadows, Live Preview

Box Shadow Generator

// PREVIEW

// SHADOW LAYERS

#1INSET

X4px

Y4px

BLUR10px

SPREAD0px

ALPHA25%

// PRESETS

// CSS OUTPUT

box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.25);

// Box Shadow Generator: Features

The five values, and what each does

The horizontal and vertical offsets move the shadow, and a small positive vertical offset with no horizontal offset reads as light from directly above, which is what most interfaces assume. Blur softens the edge; a shadow with no blur is a hard duplicate of the shape. Spread grows or shrinks the shadow before blurring, which is how you make a shadow tighter than the element or extend a glow. Colour, usually with low alpha, determines how heavy it feels.

Layering is what makes shadows look real

A single shadow looks flat because real shadows are not uniform. Stacking two or three layers, a tight dark one close to the element and a larger softer one further out, produces depth that one shadow cannot. This is what material design systems specify and why their elevation values list several shadows per level. The generator stacks layers into one declaration separated by commas, which is exactly how CSS expects them.

Elevation should mean something

Shadow depth signals how far an element sits above the page, and it is only useful if it is consistent. Define a small set of levels, perhaps three or four, and use them systematically: a resting card at one level, a hovered card a step higher, a dropdown higher still, a modal at the top. Arbitrary shadows applied per component produce an interface where depth carries no information.

Inset, glow and performance

The inset keyword draws the shadow inside the element instead of outside, which is how pressed buttons, inset wells and input fields get their depth. A glow is simply a shadow with no offset, generous blur and a saturated colour, optionally repeated at increasing sizes. One caveat: large blurred shadows are relatively expensive to paint, so animating a shadow on many elements at once can cost frames, and transitioning opacity on a pseudo-element is the usual workaround.

Why a shadow should not be pure black

The preview and the CSS are produced locally with nothing transmitted, stored or logged. To choose the shadow colour deliberately rather than by eye, the Color Converter makes it easy to take a dark version of your brand hue rather than plain black, which usually looks better.

// Box Shadow Generator: FAQ

What do the box-shadow values mean?: In order: horizontal offset, vertical offset, blur radius, spread radius and colour, with an optional inset keyword. Offsets move the shadow, blur softens its edge, spread grows or shrinks it before blurring, and inset draws it inside the element rather than outside.
What is the difference between blur and spread?: Spread changes the size of the shadow shape before any softening, so a positive spread makes it larger than the element and a negative one smaller. Blur softens the edge of whatever shape results. A negative spread with a generous blur is how you get a shadow that is tighter than the element and still soft.
Why do professional shadows use several layers?: Because real shadows are not uniform. A tight dark layer near the element plus a larger diffuse layer further out reproduces how light actually falls, and reads as depth rather than as a grey outline. Material design elevation levels are specified with multiple shadows for exactly this reason.
How many shadow layers can I stack?: CSS accepts a comma-separated list of any length, and the generator stacks them into one declaration. In practice two or three layers achieve the effect; beyond that the visual return is small and the paint cost grows.
Should shadows be black?: Usually not pure black. A dark, desaturated version of the surface or brand hue looks more natural, because a real shadow takes on the colour of its surroundings. Pure black at low opacity reads as grey and can flatten a colourful interface.
What is inset for?: Drawing the shadow inside the element, which makes it look recessed rather than raised. It is how pressed button states, inset wells and the subtle depth of input fields are done. Combining an inset shadow with an outer one gives both a rim and elevation.
How do I make a glow?: Use no offset, a generous blur and a saturated colour. Repeating the same colour at two or three increasing blur radii intensifies it. This is the basis of neon-style effects, and it is the same property doing the work as an ordinary shadow.
Does box-shadow affect layout?: No. Shadows are painted outside the element box and do not take up space, so adding one never pushes neighbouring content around. That is the main practical difference from adding a border, which does affect layout unless you compensate.
Are large shadows a performance problem?: They can be when animated. A big blurred shadow is relatively expensive to paint, so transitioning it on many elements at once, such as a grid of cards on hover, may drop frames. Animating the opacity of a pseudo-element that carries the shadow is the usual way to keep it smooth.
Is anything I configure sent to a server?: No. The preview and the generated CSS stay in your browser, and nothing you enter is transmitted, stored or logged.

// How to Use Box Shadow Generator

Start from a preset or a single layer

Load a preset if you want a recognisable look to adjust, or begin with one layer and set the offsets, blur, spread and colour against the live preview.
Add layers for depth

Stack a tight darker layer close to the element and a larger softer one further out. Two or three layers is where the realistic look comes from; more rarely helps.
Copy the box-shadow declaration

Copy the declaration and paste it into your stylesheet. If you are defining elevation levels, save the values as tokens so the same depths are reused rather than re-invented per component.

Category Design