Box Shadow Generator | How to use and interpret results
Adjust a card or button shadow while inspecting its CSS declaration. Separate offset, blur, spread and opacity controls help distinguish shadow placement from thickness.
- Runs in your browser
- Nothing is uploaded
- No signup; device limits apply
Loading the tool. If it does not appear, reload this page.
How to use this tool
Set horizontal and vertical offsets in pixels, then adjust blur and spread. Enable inset for an inner shadow and judge transparency against the intended background.
Results and examples
Offsets of 0 and 8 with blur 24 and spread 0 create a blurred shadow shifted 8 px downward. Paste the resulting box-shadow declaration into the target element's style.
Worked example
Offsets of 0 and 8 with blur 24 and spread 0 create a blurred shadow shifted 8 px downward. Paste the resulting box-shadow declaration into the target element's style.
Limitations
- A shadow does not automatically supply adequate contrast or a keyboard focus indicator.
- This is not an editor for a stacked list of multiple shadows.
Fields
| Field | Guidance and constraints |
|---|---|
| X offset (px) | Check the unit and format displayed beside this field. |
| Y offset (px) | Check the unit and format displayed beside this field. |
| Blur (px) | Check the unit and format displayed beside this field. |
| Spread (px) | Check the unit and format displayed beside this field. |
| Shadow color | Check the unit and format displayed beside this field. |
| inset | Check the unit and format displayed beside this field. |
| CSS | 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
What does an 8-pixel vertical offset do?
Offsets of 0 and 8 with blur 24 and spread 0 create a blurred shadow shifted 8 px downward. Paste the resulting box-shadow declaration into the target element's style.
Does adding a shadow complete accessibility styling?
A shadow does not automatically supply adequate contrast or a keyboard focus indicator. This is not an editor for a stacked list of multiple shadows.
