CSS shadow generator
Build box-shadow and text-shadow CSS visually. Adjust offset, blur, spread, color and opacity with sliders, then copy production-ready CSS. Free, no sign-up, runs in your browser.
α
0
4
6
-1
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1);Want the full design system from a color? Open the color palette generator to create accessible palettes, semantic tokens, light and dark themes, and production-ready CSS — all from a single color.
How to use this tool
- Choose box-shadow or text-shadow.
- Adjust offset, blur, spread and color with the sliders.
- Copy the generated CSS and paste it into your stylesheet.
Frequently asked questions
- What shadow types are supported?
- Box shadows (for elements) and text shadows (for text). Both support offset X/Y, blur radius, color and alpha. Box shadows also include spread radius.
- Is the output production-ready?
- Yes — the CSS uses standard rgba() color notation and is ready to paste into any stylesheet. It works in all modern browsers.
- Can I create layered shadows?
- This tool generates single shadows. For layered effects, generate multiple shadows and combine them with commas in your CSS.