CSS Box Shadow Generator Color
Dial in a box shadow visually and copy the CSS.
CSS Box Shadow Generator is a free online tool that dial in a box shadow visually and copy the CSS. It runs entirely in your web browser using plain JavaScript, so files are processed on your own device and never uploaded to a server. There is no sign-up, no file size limit imposed by the site, no watermark and no paid tier.
- Price
- Free — no account, no quota, no watermark
- Category
- Color
- Where it runs
- In your browser, on your device
- Files uploaded
- None
- Technology
- plain JavaScript
- Settings
- 7
- Works offline
- Yes, after the first visit
About CSS Box Shadow Generator
CSS Box Shadow Generator is one of 14 color tools on DuckyTools, and like all of them it runs entirely inside this page. Dial in a box shadow visually and copy the CSS.
How to use it
- Enter horizontal offset, vertical offset and blur.
- Adjust the remaining 4 settings if the defaults do not fit your case.
The 7 settings
| Setting | What it does | Default |
|---|---|---|
| Horizontal offset | Range -60–60px. | 0px |
| Vertical offset | Range -60–60px. | 12px |
| Blur | Range 0–120px. | 28px |
| Spread | Range -60–60px. | -8px |
| Color | A color, picked from your system color picker. | #0b1120 |
| Opacity | Range 0–100%. | 45% |
| Inset shadow | On or off. Off by default. | Off |
Under the hood
| Runs on | plain JavaScript — runs the whole thing |
| Controls | Horizontal offset, Vertical offset, Blur, Spread, Color, Opacity, Inset shadow |
Questions
What are the limits on horizontal offset?
It accepts -60 to 60px, starting at 0px. The other numeric controls have their own ranges: vertical offset -60–60px, blur 0–120px, spread -60–60px.