CSS Box Shadow: Complete Guide with Examples

Box shadows are one of the most versatile CSS properties. A well-crafted shadow can make any element feel grounded, elevated, or interactive. From subtle card depth to dramatic dropdowns, the shadow is what separates flat design from perceived three-dimensionality.

The box-shadow syntax is deceptively simple but the design possibilities are vast. Layering multiple shadows creates more realistic depth. Inset shadows create pressed-in effects. The color of the shadow matters as much as its size.

box-shadow syntax breakdown

The full box-shadow syntax is: box-shadow: offset-x offset-y blur-radius spread-radius color. All values except offset-x and offset-y are optional. The minimum is two values: offset-x and offset-y. Multiple shadows are comma-separated. The keyword "inset" before the offsets makes the shadow appear inside the element instead of outside.

Offset X/Y, blur, spread, color

Offset-X is horizontal distance (positive = right, negative = left). Offset-Y is vertical distance (positive = down, negative = up). Blur-radius controls softness — 0 is sharp, larger values produce softer edges. Spread-radius expands or contracts the shadow — positive spreads it, negative shrinks it. Color accepts any valid CSS color. Using rgba() with low alpha creates subtle, natural-looking shadows.

Multiple shadows and layering

Stacking multiple box-shadow values creates more realistic depth effects. A common technique: combine a small sharp ambient shadow with a larger soft key shadow. For elevation systems like Material Design, use three shadow layers: a hard dark shadow for height, a soft ambient shadow for atmosphere, and a subtle umbra shadow for the base.

Inset shadows

The inset keyword reverses the shadow direction — instead of appearing outside the element, it appears inside. Inset shadows are used for: pressed button states, inner bevels, input field focus rings, concave shapes, and the inner wells in neumorphism. Combine inset with spread to create thick inner shadows.

Elevation design systems

Material Design 3 defines elevation levels from 0 to 5 using box-shadow values. Each level corresponds to a use case: 0 for flat surfaces, 1 for cards, 2 for buttons, 3 for menus, 4 for modals, 5 for navigation drawers. Building an elevation system standardizes shadow usage across a product and ensures consistent perceived depth.

Neumorphism technique

Neumorphism uses two box-shadows on the same element: a light shadow on the top-left and a dark shadow on the bottom-right. The element appears to extrude from the background. The effect only works when the background color and the shadow colors are derived from the same base color. Using pure white and pure black shadows looks unrealistic.

Frequently Asked Questions