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.

Box Shadow

.element { box-shadow: 10px 10px 5px 0px #194d33; }

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

Box Shadow

.element { box-shadow: 10px 10px #194d33; }

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

Box Shadow

.element { box-shadow: 10px 10px 5px #194d33; }

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.

Box Shadow

.element { box-shadow: 10px 10px 2px #AED581, -10px -10px 4px #FFF176, -10px 10px 6px #F06292; }

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.

Border Radius

.element { border-radius: 0px; }

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

HTML
CSS
Output