CSS Shadow Generator
Generate CSS box-shadow values with a live preview.
box-shadow: 0px 4px 12px 0px #00000020;
What is CSS Shadow Generator?
Adjust offset, blur, spread, and color to build a box-shadow and copy the CSS.
FAQ
Is this tool free to use?
Yes. This tool is available to use for free.
Does the tool run in the browser?
Yes. The logic runs client-side in your browser.
Is my data uploaded to a server?
No. Your input stays in your browser and is not uploaded by this tool.
Can I use this tool for large files?
It depends on your device and browser. Very large inputs may be slow; for huge files, use a local CLI tool.
Example usage
Input
0 4px 12px 0 #00000020
Output
box-shadow: 0 4px 12px 0 #00000020;
How to use
- Set offset X, Y, blur, spread, and color
- Preview updates live
- Copy the CSS