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. Converts the shadow from outside to inside (inner shadow). Building intuition for the parameters Just offset — a hard shadow: box-shadow : 8 px 8 px 0 0 #2 f855a ; Enter fullscreen mode Exit fullscreen mode Zero blur, zero spread.…