CSS Box Shadow Generator
Create and customize CSS box shadows visually. Add multiple shadows and copy the CSS.
How to Use
- 1Adjust the shadow offset, blur, spread, and color using the sliders.
- 2Toggle the inset option for inner shadows.
- 3Add multiple shadow layers for complex effects.
- 4Copy the generated CSS box-shadow property.
Frequently Asked Questions
What is a CSS box shadow?
A CSS box shadow adds a shadow effect around an element's frame. It is defined by horizontal and vertical offsets, blur radius, spread radius, and color. Multiple shadows can be combined for layered effects.
Can I create an inset shadow?
Yes. Toggle the inset option to create a shadow inside the element instead of outside. Inset shadows are commonly used for pressed button states and input fields.
How do I add multiple shadows?
Click Add Shadow to create additional shadow layers. Each layer has independent settings and they are all combined in the CSS output, separated by commas.