box-shadow is one of CSS's most versatile properties. Its syntax has six parameters and supports multiple layered shadows — which makes it powerful and also easy to get wrong. Here's everything you need to know.

The syntax

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

Enter fullscreen mode

Exit fullscreen mode

offset-x: Horizontal offset. Positive = right, negative = left.

offset-y: Vertical offset. Positive = down, negative = up.

blur-radius: How blurry the shadow is. 0 = sharp edge. Larger = softer. Default: 0.

spread-radius: Expands or shrinks the shadow. Positive = larger, negative = smaller. Default: 0.

color: Shadow color. Default: the text color ( currentColor ).

inset: Keyword.…