No Time Dad

A blog about web development written by a busy dad

Demystifying box-shadow

Overview

The box-shadow property can be a tricky beast. It can take up to 5 different values, and you can add multiples of the 5 values on a single box-shadow property. You can see why this property is complex and intimidating. For a while I just copied the box-shadow declarations that tailwindcss was using, but I thought it was time to dive into this property a little bit more. Addionally, not all of the values are required.

Values

The main box-shadow values that most people will use are offset-x, offset-y, blur-radius, spread-radius and color. Each of these values are required to be in that order when you use box-shadow.

  • offset-x is the position of the shadow on the horizontal axis (or x-axis).
  • offset-y is the position of the shadow on the vertical axis (or y-axis).
  • blur-radius defines how sharp the shadow will be. The higher this number is the more rounded and blurry the shadow will appear.
  • spread-radius defines how large or small the shadow should grow. The higher this number is the larger the shadow will be.
  • color is the color of the shadow, which can be hex, rgb, or hsl.
Inset

A less commonly used box-shadow property value is inset, which changes the shadow from a drop shadows (outside the element) to a shadow inside the element’s frame. If you are going to use this value it must be the very first value in the box-shadow property definition. I’m sure there is a good use case for an inset box-shadow somewhere, but I haven’t needed one yet.

As you can see below, using the inset value pulls the shadow in on the element instead of around the outside of it.

.box {
  box-shadow: inset 0px 0px 5px 5px #a3a3a3;
}
Multiple

As mentioned above, you can also “layer” multiple shadows on a single box-shadow property. All you have to do is add a comma and a space to your box-shadow property value and the browser will render each shadow on the element. Below you can see that we have one shadow where the offset-x is 5px lightblue and another shadow where the offset-x is -5px lightgreen.

.multiple_box {
  box-shadow: 5px 0px 5px 2px lightblue, -5px 0px 5px 2px lightgreen;
}

Conclusion

Most people are probably using box-shadow for a card or a button and probably just need a single clean shadow, as opposed to the beachy vibed one shown above. Although, I do really like that one for some reason.

Lately, I’ve been using box-shadow: 0px 0px 5px 2px #a3a3a3, which is the default for the playground slider shown below. If you want to learn more I highly recommend taking a look at the MDN docs on box-shadow. They go a lot more in-depth than what most people probably need, but there is a lot of good information there.

Playground

Below is a tiny playground you can use to try out the various settings and values mentioned above. It is only displaying one box-shadow value at a time, so if you want multiple values you’ll have to create that on your own. Also, input range sliders are pretty bad on mobile so I apologize ahead of time for that to any mobile users. It works much better on desktop.

box-shadow: 0px 0px 5px 2px #a3a3a3