CSS Box Shadow Generator

The CSS box shadow generator is a free tool that runs entirely in your browser, with no data ever sent to a server. Dial in a box-shadow and copy the resulting property.

Reading the four lengths

The box-shadow property takes, in order: the horizontal offset, the vertical offset, the blur, then the spread. The first two place the shadow, the third softens its edge, and the fourth grows or shrinks it before the blur is applied.

A believable shadow stays quiet

A readable shadow imitates light coming from above: no horizontal offset, a positive vertical offset, low opacity. Past 30 % opacity the effect reads as a grey smudge rather than a shadow. Pure black looks dull; a dark tint borrowed from the page’s dominant colour looks far more natural.

Inner shadows

The inset keyword turns the shadow inwards. That is what hollows out a form field, draws a pressed button, or marks a recessed area.

What this tool does not do

This tool composes one shadow at a time. Stacked shadows, separated by commas, still have to be written by hand. It also does not produce text-shadow, whose syntax has no spread value.

Frequently asked questions

What is the difference between box-shadow and filter: drop-shadow?

box-shadow follows the block’s rectangle, rounded corners included. drop-shadow follows the actual shape of the content, transparency included: that is the one you need for the shadow of a cut-out PNG logo.

How do I stack several shadows?

Just separate the values with commas inside a single property. Generate each shadow here, then paste them one after another: the first one declared sits in front of the others.

Is my data sent to a server?

No: the text you type or paste is processed entirely in your browser, on your device. It is never transmitted to a server.

Do I need an account or an install?

No: the tool works directly on this page, with no sign-up and no installation.