CSS Box Shadow Generator
Design box-shadow effects visually and copy ready-to-use CSS code.
Free CSS Box Shadow Generator
The Toolts CSS Box Shadow Generator creates box-shadow effects with a visual editor. Adjust horizontal and vertical offsets, blur and spread radius, shadow color, and opacity. Toggle between outset and inset shadows. The generated CSS is ready to paste into your stylesheet.
Understanding Box Shadow
The CSS box-shadow property adds shadow effects to elements. The syntax is: box-shadow: [inset] [x-offset] [y-offset] [blur-radius] [spread-radius] [color]. The horizontal offset shifts the shadow left/right, the vertical offset shifts it up/down, blur radius controls softness, and spread radius controls size. An inset shadow appears inside the element instead of outside.
Design Tips
For modern UI design, subtle shadows with low opacity (5–15%) work best. Use larger blur values (15–30px) with small offsets for soft, natural-looking shadows. Multiple layered shadows can create depth — combine a tight focused shadow with a larger diffused one. For dark modes, use shadows with very low opacity or use light-colored shadows.