Learn how to create a simple and quick box shadow of material design. Use Google’s design trend to give your Divi project a modern look. Use in your sections, rows, and modules as quickly as you can type a class name inside Custom CSS.

First, I’d like to emphasize that this tutorial is only possible because of the team at DigiCorp. They’ve created the Propeller project – front-end responsive framework inspired by Google’s material design trends. The box shadow that I’ll use in this tutorial is one of many features of this framework, so all credits go to this awesome open source project – and it’s even under MIT license, so you can use it freely in your commercial projects! Yeah!

So, are you ready to learn a thing or two about box shadow of material design? Let’s start!

Learn how to use box shadow of material design in Divi theme

Preview

You’ll learn how to add 5 different depths of box-shadow and you can choose if they’ll animate to the next level of box-shadow on mouse hover or not.

Layout

You can use the following CSS classes inside any Divi section, row or module.

I rather use them in rows, so I can easily change padding values and make better card-like designs.

CSS

First, paste some code inside Divi > Theme Options > Custom CSS:

/*!
 * Propeller v1.0.0 (http://propeller.in)
 * Copyright 2016-2017 Digicorp, Inc.
 * Licensed under MIT (http://propeller.in/LICENSE)
 */
 
/* -- Box shadow -- */
.box-shadow-0, .box-shadow-1, .box-shadow-2, .box-shadow-3, .box-shadow-4, .box-shadow-5, .box-shadow-0-hover, .box-shadow-1-hover, .box-shadow-2-hover, .box-shadow-3-hover, .box-shadow-4-hover {
  padding: 30px;
  border-radius: 3px;
  transition: .3s all;
}

.box-shadow-0-hover, .box-shadow-0, .box-shadow-0-hover {
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.box-shadow-0-hover:hover, .box-shadow-1, .box-shadow-1-hover {
  -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  -moz-box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.box-shadow-1-hover:hover, .box-shadow-2, .box-shadow-2-hover {
  -webkit-box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  -moz-box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

.box-shadow-2-hover:hover, .box-shadow-3, .box-shadow-3-hover {
  -webkit-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  -moz-box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.box-shadow-3-hover:hover, .box-shadow-4, .box-shadow-4-hover {
  -webkit-box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
  -moz-box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
  box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}

.box-shadow-4-hover:hover, .box-shadow-5 {
  -webkit-box-shadow: 0 24px 48px rgba(0,0,0,0.30), 0 20px 14px rgba(0,0,0,0.22);
  -moz-box-shadow: 0 24px 48px rgba(0,0,0,0.30), 0 20px 14px rgba(0,0,0,0.22);
  box-shadow: 0 24px 48px rgba(0,0,0,0.30), 0 20px 14px rgba(0,0,0,0.22);
}

Secondly, choose if there’ll be animation on hovering or not. You can check the demo page to see the difference between the classes with the hover animation.

Finally, experiments using these box-shadow effects in your sections, rows, and modules. There is always space for new creative thinking and design ideas.

Conclusion

How did you like this tutorial about box shadow of material design?

If you liked it feel free to subscribe for more tutorials like this and send me a message or write a comment below. Thanks a lot and I really hope I managed to help you somehow or get new design ideas for your next Divi project.

See ya!