CSS Box Shadow Generator – Layers, Inset and Tailwind Output

How to use

Pick a preset close to what you want, or adjust layer 1.
Change the horizontal and vertical offset, blur, spread and opacity with the sliders or by typing. Typed values can go beyond the slider range.
Set the color with the color picker or a hex code such as #000000. Turn on "Inner shadow (inset)" for a shadow inside the box.
Press "Add layer" to stack shadows (up to 5). Layer 1 is drawn on top.
Check the result on a light or dark background, then copy the CSS or the Tailwind CSS class.

X, Y and spread range from -500 to 500 px, blur from 0 to 500 px and opacity from 0 to 100%. Values outside are clamped. Up to 2 decimal places.
Lengths are in px only. Colors are written as rgba(), also at 100% opacity (rgba(..., 1)).
Tailwind output uses the arbitrary value syntax shadow-[...], which works in Tailwind CSS v3.0 and later, including v4, but not in v2. It is not converted to theme values.
text-shadow and filter: drop-shadow() are not covered.
Nothing you enter is saved. It is gone when you close the page.

Each layer is written as "inset X Y blur spread color" and the layers are joined with commas. Zero is written with its unit, as 0px.

For Tailwind CSS, spaces inside each layer become underscores, and commas inside rgba() and between layers are written without spaces.

Which shadow is on top when I stack several?

In CSS the first shadow in the list is drawn on top. Here that is layer 1.

What does a negative spread do?

It makes the shadow smaller than the box. Combined with blur and a vertical offset, it gives a soft shadow that shows mostly below the element.

Which Tailwind CSS versions support the output?

The shadow-[...] class uses the arbitrary value syntax, supported in Tailwind CSS v3.0 and later, including v4.

Are my values sent to a server?

No. The CSS and the preview are generated entirely in your browser.

Last updated: October 5, 2026