Box Shadow Generator

CSS Box Shadow Generator — Build Depth and Elevation in CSS

The CSS box-shadow property is one of the most powerful tools for conveying depth, elevation, and hierarchy in flat UI design. From subtle card lifts to bold popup highlights, carefully crafted shadows guide user attention and communicate interactive states without additional DOM elements. Colaro's box shadow generator lets you build and preview shadows visually, with instant CSS output you can paste directly into your stylesheet.

Understanding Box Shadow Parameters

A CSS box-shadow takes five parameters: horizontal offset (positive = right), vertical offset (positive = down), blur radius (how soft the shadow edge is), spread radius (how large the shadow extends beyond the element), and color. The optional inset keyword reverses the shadow direction for pressed/sunken effects. Layering multiple shadows with a comma-separated list creates sophisticated elevation systems — for example, combining a close sharp shadow with a far soft shadow mimics realistic light diffusion.

Elevation Systems and Shadow Design

Material Design and other leading design systems define elevation as a semantic property with corresponding shadow values at each level. A well-designed shadow system typically uses very subtle, warm-toned shadows (slightly towards the surface color) rather than pure black, as pure black shadows appear harsh and artificial. Using rgba() with low opacity values — typically 0.08 to 0.18 — produces softer, more natural-looking depth. Layer two shadows per elevation level: one tight shadow for contact definition and one wider shadow for ambient spread.