Box Shadow Generator
Generate CSS box-shadow with visual controls. Adjust offset, blur, spread, color, and inset. Live preview and copy.
Quick Answer
CSS box-shadow syntax: box-shadow: x y blur spread color; — e.g. box-shadow: 4px 4px 10px rgba(0,0,0,0.2);
box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.20);About This Tool
The Box Shadow Generator provides a visual interface for creating CSS box-shadow values. Box shadows add depth, dimension, and visual hierarchy to elements on a webpage. Instead of guessing pixel values and opacity levels, this tool lets you drag sliders and see the result instantly, then copy the production-ready CSS code.
Understanding Box Shadow Values
The box-shadow property takes up to six values: optional inset keyword, horizontal offset (X), vertical offset (Y), blur radius, spread radius, and color. X and Y position the shadow relative to the element. Blur controls how soft or sharp the shadow edges are. Spread expands or contracts the shadow size. Color typically uses rgba to control transparency. You can also stack multiple shadows by comma-separating them for complex lighting effects.
Design Best Practices
Modern UI design favors subtle shadows with low opacity (10-25%) and relatively large blur values. The Y offset should generally be larger than X to simulate light coming from above, which feels natural. Avoid pure black shadows on colored backgrounds. Instead, use a darker shade of the background color for shadows that feel cohesive with the design. The spread value is often negative for the popular lifted card effect where the shadow is smaller than the element.