CSS Box-Shadow Generator

Adjust the parameters of a CSS drop shadow and instantly get the corresponding box-shadow value, with a live preview. 100% local processing in your browser (WebAssembly) — nothing is sent to a server.

Example:

Horizontal offset (px)

Vertical offset (px)

Blur (px)

Spread (px)

Color

Inner shadow (inset)

How it works

The CSS box-shadow property accepts a horizontal offset, a vertical offset, a blur radius, a spread radius, a color, and an optional "inset" keyword for an inner shadow. This tool composes these values live so you don't have to guess the right settings by hand.

What is the difference between blur and spread?

Blur softens the edges of the shadow by making them gradual, while spread increases or reduces the size of the shadow before the blur is applied.

What is the "inset" option for?

It turns the drop shadow into an inner shadow, cast inside the element, often used to give a recessed or input-field effect.

100% local processing: the calculation happens entirely in your browser via WebAssembly, with no data sent to a server.