CSS Box Shadow Generator

The box-shadow property adds shadow effects around an element. The syntax is: x-offset y-offset blur spread color.

Offsets (X/Y) control the shadow's position. Positive X moves right, positive Y moves down. Negative values move left and up.

Blur softens the shadow edges. Higher values create a more diffused shadow. A value of 0 creates a sharp shadow.

Spread expands or contracts the shadow. Positive values make the shadow larger, negative values make it smaller than the element.

Inset changes the shadow from outer to inner, creating a pressed/recessed effect.

Multiple shadows can be stacked for realistic depth. Layer subtle shadows for a natural look — this mimics how light creates multiple soft edges in the real world.