Box Shadow Generator
Create complex CSS box shadows with a visual editor. Add multiple shadow layers, adjust color, blur, spread, and offset, and copy the generated CSS.
CSS box-shadow takes the form: offset-x offset-y blur-radius spread-radius color. Multiple shadows can be stacked with commas to create layered depth effects. This tool lets you build them visually and copy the resulting CSS code.
Shadow Layers
Preview
.element {
box-shadow: 4px 4px 10px 0px #00000026;
}Frequently Asked Questions
Can I add multiple shadows?
Yes! You can add as many shadow layers as you need. Each layer has independent color, blur, spread and offset controls.
What is the spread radius?
Spread radius expands or contracts the shadow in all directions. A positive value makes the shadow larger than the element; negative makes it smaller. It's different from blur, which only controls softness.
What is the difference between inset and outset box shadow?
By default, box-shadow casts outward from the element. Adding the inset keyword makes the shadow appear inside the element — useful for pressed-button effects and inner glow.
How do I create a soft UI (neumorphism) shadow?
Neumorphism uses two shadows: one light (above-left, white or light tone) and one dark (below-right, darker tone). Set both to inset for the pressed state.