Box Shadow Generator
Visually design a CSS box shadow, adjusting offset, blur, spread, and color with live preview, then copy the generated CSS code.
box-shadow: 0px 4px 12px -2px #00000020;About the Box Shadow Generator
A box shadow generator lets you visually design a CSS box shadow, adjusting offset, blur, spread, and color, then copy the generated code.
How to use
1
Adjust the horizontal and vertical offset, blur radius, and spread.
2
Choose a shadow color and opacity.
3
Copy the generated CSS box-shadow code.
Frequently asked questions
What does the spread value control?
Spread expands or contracts the size of the shadow itself, independent of the blur, letting you make a shadow larger or smaller than the element it's attached to.
Can I add multiple shadows to one element?
Yes, CSS supports multiple comma-separated box-shadow values on a single element, though this specific tool may focus on designing one shadow at a time.
Explore more tools in the Developer category.