Box Shadow

box-shadow is a popular CSS property to use. It allows you to place a shadow behind an element. It’s used very frequently within Google’s Material Design language to convey depth and elevation.

Box shadow has been here for a while so browser support is solid https://caniuse.com/#feat=css-boxshadow

Playground

Below are some sliders to play around with some box-shadow values. In this case, I use 5 values to set the box shadow: offset-x, offset-y, blur radius, spread radius and color. This is the full declaration of a CSS box shadow with all of its properties.

Optionally, you can have an inset box-shadow by placing inset at the start of the box shadow value. This places the box shadow inside of the element.

Note: Having a negative blur radius is invalid and will result in your box shadow to not render.

There are also more compact ways of declaring CSS box shadows. Another format is with offset-x, offset-y, color.

Or you could use offset-x, offset-y, blur-radius, color to declare box shadows.

Stacking Box Shadows

You can also stack multiple box shadows. All you need to do is comma separate multiple box-shadow values. Box shadows declared last will appear behind box shadows declared at the start.

Extra

Box shadows will match the same shape as the element. If you have a circular element, then the box shadow will be circular as well.

Conclusion

Box shadows are really great. Seriously go use these if your design could use them. If this helped you out, feel free to share this with others.

Here is a link to complete box-shadow documentation on the MDN website