CSS Box Shadow Generator
Free CSS box-shadow generator. Adjust offset, blur, spread, and color, then copy the CSS.
px
px
px
px
CSS
Your files are processed directly in your browser whenever possible.
How to use
- 1Set X/Y offset, blur, spread, and shadow color.
- 2Toggle inset if you need an inner shadow.
- 3Copy the box-shadow CSS.
How it works
CSS Box Shadow Generator runs in your browser whenever possible. Your data stays on your device and is not uploaded to our servers unless a feature explicitly requires it.
Example
0 12px 32px -8px #0f766e → box-shadow: 0px 12px 32px -8px #0f766e;