CSS Box Shadow Generator — Copy Free
Build one box-shadow declaration from offsets, blur, spread, color, and an optional inset flag. The result can be pasted into the style rule for a card or button.
- Runs in your browser
- Nothing is uploaded
- No signup; device limits apply
Numbers stay on your device. Nothing is sent to a server.
How to use this tool
Horizontal and vertical offsets may be negative, while blur must be nonnegative. Use inset for an inner shadow and supply a color that the target browser accepts as CSS.
Results and examples
Offsets of 0 and 8 with blur 24 and spread 0 produce a downward, softened shadow candidate. Test the declaration on the actual component against its intended background.
Limitations
- The output describes a single layer; multiple shadows belong in one comma-separated value.
- Repeated box-shadow declarations generally override earlier declarations rather than add layers.
Fields
| Field | Guidance and constraints |
|---|---|
| Offset X (px) | Accepted range: -200–200 · Input step: 1 |
| Offset Y (px) | Accepted range: -200–200 · Input step: 1 |
| Blur (px) | Accepted range: 0–200 · Input step: 1 |
| Spread (px) | Accepted range: -100–100 · Input step: 1 |
| Colour | Check the unit and format displayed beside this field. |
| Inset | Check the unit and format displayed beside this field. |
Data handling
Processing stays in the current browser tab; the site does not upload tool input for the calculation itself.
Sources
Frequently asked questions
Which values create a downward card shadow?
Offsets of 0 and 8 with blur 24 and spread 0 produce a downward, softened shadow candidate. Test the declaration on the actual component against its intended background.
How do I combine multiple shadow layers?
The output describes a single layer; multiple shadows belong in one comma-separated value. Repeated box-shadow declarations generally override earlier declarations rather than add layers.
Related tools
You do not need to start over. Continue with the tool that fits your next step.
