Box Shadow Generator
NEWAdjust the shadow and see it update live, then copy the box-shadow CSS.
How to use Box Shadow Generator
- Drag the X and Y offset, blur and spread sliders to shape the shadow.
- Pick a shadow color and adjust its opacity.
- Toggle Inset shadow for an inner shadow instead of a drop shadow.
- Copy the generated box-shadow CSS.
Frequently asked questions
What do X offset, Y offset, blur, and spread control?
X and Y offset move the shadow horizontally and vertically, blur softens its edges, and spread grows or shrinks the shadow's size before blurring is applied — all in pixels.
What does the inset checkbox do?
It switches the shadow from an outer drop shadow to an inner shadow cast inward from the element's edges, using CSS's inset keyword.
How is the shadow color applied?
You pick a base color and an opacity percentage, which the tool converts into an rgba() value so the shadow can be semi-transparent.
Community
Loading...