Box Shadow Generator

A box-shadow is defined by horizontal and vertical offsets, a blur radius, a spread radius, a colour, and an optional inset keyword. The offsets move the shadow, blur softens it, and spread grows or shrinks it.

Inset draws the shadow inside the element instead of outside, creating a pressed or recessed look. Without it, the shadow falls outward behind the element.

Blur controls how soft and diffuse the shadow edge is, while spread changes the overall size of the shadow before blurring. A larger spread makes a bigger shadow, and more blur makes it fuzzier.

Copy the box-shadow rule the tool produces and paste it into the style for your element. The live preview shows exactly how it will appear.

Yes. You choose the shadow colour, and using a colour with transparency produces a softer, more natural shadow that blends with the background.

Yes. The shadow preview and CSS are built entirely in your browser with no server involved, so nothing is uploaded.

If the offsets, blur and spread are all zero, or the colour is fully transparent, the shadow will not be visible. Increasing an offset or the blur usually makes it appear.