CSS Box Shadow Generator
Design box shadows visually with sliders and get the CSS code instantly.
100% Client-Side
5px
5px
15px
0px
30%
box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.30);
What is CSS Box Shadow Generator?
A CSS box-shadow generator provides a visual interface to create and customize shadow effects for HTML elements. Adjust offset, blur, spread, color, and opacity to achieve anything from subtle depth to dramatic elevation effects.
How to Use
- Adjust the horizontal and vertical offset sliders
- Set the blur radius for softness and spread for size
- Choose a shadow color and opacity
- Toggle inset for inner shadows, and copy the generated CSS
Frequently Asked Questions
- Can I apply multiple shadows to one element?
- Yes, separate multiple shadow values with commas in the CSS. This lets you layer shadows for realistic depth effects.
- What is an inset shadow?
- An inset shadow appears inside the element rather than outside, creating a pressed or recessed look. Add the 'inset' keyword to your box-shadow value.
- How does spread radius differ from blur radius?
- Blur makes the shadow softer and larger. Spread expands or contracts the shadow's size without affecting its sharpness. Negative spread makes the shadow smaller than the element.