CSS Generator
CSS Shadow Generator
Create layered box-shadow and text-shadow effects. Adjust blur, spread, and color, preview against a background, and copy the CSS. Processing runs in your browser.
A shadow you can see
Generated CSS
Need a background first? Try the gradient generator or return to the CSS generator index.
Use layers to control depth
Choose box-shadow or text-shadow and add up to five layers. Box shadows support spread and inset; text shadows do not. The first listed shadow is painted on top. The preview background and box radius help you judge the result, but are not included in the exported shadow rule.
Why does the shadow look different on my site?
Background color, box shape, and neighboring elements affect the perceived depth. Preview both light and dark surfaces and verify the result in your real layout.