The box-shadow property is one of the most underused tools in CSS. Most developers use it for a single subtle drop shadow and stop there — but the full syntax supports layered shadows, inset effects, and colour-based glows that can replace entire images.

This guide covers everything from the basic syntax to advanced multi-layer techniques.

The full syntax

box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color;

Enter fullscreen mode