CSS Box Shadow Generator

box-shadow takes: offset-x offset-y blur-radius spread-radius color. You can add 'inset' at the start for inner shadows. Multiple shadows are comma-separated. Example: box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);

Blur radius controls the softness of the shadow edge — 0 is a hard edge, higher values are more diffuse. Spread radius expands or contracts the shadow before blur is applied — positive values make the shadow larger than the element, negative values shrink it.

An inset shadow appears inside the element rather than outside. It's useful for creating pressed/sunken button effects, inner glow effects, and embossed textures. It still respects border-radius. Use negative offset values to position the shadow on any side.

Layer multiple shadows: a larger, softer shadow for ambient occlusion and a smaller, harder shadow for direct light. Example for elevation 2: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)'. Google's Material Design uses this technique systematically across its elevation levels.