Design tool
Box Shadow Generator
Tune a shadow visually and copy valid CSS.
CSS box-shadow
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.2);
How the box shadow generator works
Build a CSS box-shadow with live offsets, blur, spread, color, opacity, and inset preview.
0 8px 24px 0 rgba(0,0,0,0.2) creates a soft shadow below an element.
Assumptions and limitations
Opacity is clamped from 0 to 1 and numeric dimensions are emitted in pixels.
Inputs and results stay in your browser. Blank, invalid, or mathematically undefined inputs show a clean placeholder instead of a broken number.
Practical use
Use this design tool to explore scenarios quickly, then verify important decisions against the original source data or requirements.
Frequently asked questions
Does the box shadow generator send my data anywhere?
No. It runs client-side in your browser and makes no network requests.
Why is the result blank or shown as a dash?
One or more inputs are blank, outside the accepted range, or would make the calculation undefined. Check the labels and enter finite values.
Can I use decimal values?
Yes, where decimals are meaningful. Counts that represent whole items may require integers.