CSS shadow and radius
Compose layered shadows with optional individual border-radius values.
- 1Add input
- 2Adjust settings
- 3Get your result
Tool input and files are processed in this browser without being uploaded.
Before you start
Compose layered shadows with optional individual border-radius values. Generate up to five validated box-shadow layers from x, y, blur, spread, color and inset fields. The preview uses the same safe CSS as the copied result.
How to use this tool
- Set the existing layer's color, offsets, blur and spread. Add more shadows as needed, up to five layers.
- Enable border radius if needed, then set linked or individual corners before generating CSS. The JSON editor below the layer controls is optional.
- Review the CSS result, then use the available copy or download controls.
Supported inputs and limits
Pasted text is limited to 1 MiB; review the result before using it.
Worked example
Example input
[{"x":1,"y":2,"blur":3,"spread":0,"color":"#0008"}]Example options
{}Example output
box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.533333);
When something does not work
Use the documented input format and keep values within the displayed limits. Review the result before using it in another document or application. Editing the input marks the previous result as stale; a failed run clears it.
Frequently asked questions
Are my files uploaded?
No. Files and tool input are processed in your browser. Moving around the site can keep a temporary workspace in the same tab. Refreshing or closing the tab clears it, so download results you want to keep.
What should I check in this result?
Generate up to five validated box-shadow layers from x, y, blur, spread, color and inset fields. The preview uses the same safe CSS as the copied result.
Documentation & further reading
Related tools
Color converter
Same color. A different format.
Contrast checker
Check the contrast between text and background colors.
Gradient maker
Find a blend you love. Copy the CSS.
Palette and color mixing
Generate rule-based palettes or compare weighted RGB color mixtures.