Back to Free Tools
FREE TOOLS
CSS Box and Text Shadow Builder
Build ordered typed box-shadow or text-shadow declarations.
Pasted text, One UTF-8 file
shadows.css, shadow-report.json
Browser only
Runs locally in your browser. Your files, pasted content and generated output are not uploaded. Reset clears this tool’s working data.
This tool needs JavaScript. If it does not load, refresh the page and try again.
How to use this tool
- Choose box or text shadow mode. Paste a JSON array of 1–20 layers, or choose one UTF-8 file.
- Supply each layer’s numeric x, y and blur, opaque color and separate opacity. Box layers may add spread and inset; text layers must omit those fields.
- Select Build shadow CSS and download shadows.css and shadow-report.json.
Examples
A box layer with x 0, y 4, blur 12, color #000000 and opacity 0.25 gives box-shadow: 0px 4px 12px 0px rgb(0 0 0 / 0.25);.
Limitations
- At most 64 KiB source,18 numeric digits/6 fraction digits,x/y/spread within±10,000,blur0–10,000,opacity0–1,1MiB combined output and30 seconds.
- No arbitrary CSS parser, named colors, preview, compositing or cross-browser raster equivalence. Text mode has no spread or inset.
Related tools
No items found.