CSS Box Shadow Generator
Build a CSS box-shadow and copy the declaration, with the length order and the rules taken from the W3C specification.
box-shadow: 0px 4px 8px #00000040;box-shadow: [inset] offset-x offset-y [blur] [spread] color
A box shadow is four numbers and a colour, and the numbers have no names in the CSS — their meaning comes entirely from position. That is the whole difficulty: swap the third and fourth and you get a different shadow with no error to tell you. This builds the declaration in the order the specification lists and leaves out what can be left out.
How it is calculated
box-shadow: [inset] offset-x offset-y [blur] [spread] color
Only the two offsets are required. Blur defaults to zero when omitted, and spread to zero as well — but because position carries the meaning, a spread cannot be written without a blur in front of it. That is why asking for spread alone still prints a zero blur.
Questions people ask
- Why does my shadow have a hard edge?
- The blur radius is zero. Two lengths mean offset only, so the shadow is a solid copy of the box pushed aside. Add a blur and the edge softens over that distance, half of it inside the shadow outline and half outside.
- What does spread actually do?
- It grows or shrinks the shadow before the blur is applied, as if the box itself were bigger. A negative spread pulls it in, which is the trick behind a shadow that appears only below an element: push it down with the vertical offset and pull the sides back in with a negative spread.
- Why is a negative blur rejected here?
- Because the specification calls it invalid, and a browser that meets the spec drops the whole declaration rather than guessing. Negative offsets and a negative spread are fine — only the blur is forbidden from going below zero.
- How do I stack several shadows?
- Separate them with commas; the first one sits on top. That is how layered depth is built, with a tight dark shadow close to the element and a wide faint one behind it. This tool builds one at a time, which you can paste side by side.
Found a problem, or want more?
A number that disagrees with its source is a defect, not a rounding preference.
What did you enter, what did the tool show, and what did you expect instead? If you have a source that disagrees with ours, a link to it is the most useful thing you can send.
Opens your mail app with the page and tool already filled in.
Related tools
CSS Gradient Generator
Build a CSS gradient and copy the exact declaration. Angles follow the CSS specification, where 0deg points up and angles turn clockwise.
HEX to RGB
Convert a hex colour to its red, green and blue channels, including the shorthand and alpha forms defined by the CSS specification.