Box Shadow Generator
Drag the sliders for each shadow, watch the live preview, then copy a paste-ready CSS declaration. Parameter names follow the MDN box-shadow reference. Nothing is uploaded.
Reading a box-shadow value
The CSS box-shadow shorthand takes the horizontal and vertical offset, an optional blur radius, an optional spread radius, a colour and the optional inset keyword, in that order. Values follow the MDN box-shadow reference; because CSS specifications can be revised, confirm the current wording on the official MDN page before shipping anything unusual. Two or more shadows separated by commas stack to give depth without extra elements. To pick the colour itself, the color picker and the color contrast checker sit alongside this tool.
Frequently asked questions
What is the difference between blur-radius and spread-radius?
The blur-radius softens the edge of the shadow, so larger values fade the shadow out further. The spread-radius grows or shrinks the shadow itself before it is blurred: a positive value expands it, a negative value contracts it. In the MDN syntax they are the third and fourth lengths.
What does inset do?
Adding inset draws the shadow inside the element instead of outside it, which is useful for pressed buttons, input wells and inset panels. In the shorthand it is written as a keyword, for example inset 5em 1em gold.
How do multiple shadows combine?
Shadows are listed comma-separated, for example 3px 3px red, -1em 0 0.4em olive. They are painted in order, so the first shadow in the list appears on top of the ones after it.
Are the values in pixels?
Offsets, blur and spread are emitted in pixels with this generator, matching the box-shadow property. CSS also accepts other lengths such as em or rem, which you can type directly if you prefer.
What colour format is produced?
A hex colour, expanded to eight digits (#RRGGBBAA) when the opacity slider is below 100%, so the transparency stays visible in the copied declaration.
Is anything uploaded?
No. The preview and the generated CSS are produced in your browser. Nothing is sent to a server and no image is rendered remotely.
Related: choose the shadow colour with the color picker, test readability with the color contrast checker, and browse every browser-only tool on the all tools page.