If you’ve been following Elegant Themes lately, you’ve probably noticed the nice, subtle, soft shadow on their blog entries. They posted a guide on how to achieve that look here, but what if you want to use that shadow on other elements on your web site?

It’s actually really simple to do with a little bit of CSS magic.

The first thing you need to do is either edit your themes child CSS stylesheet, or add some custom CSS to Divi. Simply add the lines of CSS below to your styles:

.subtle-shadow {
box-shadow: 0px 20px 150px #d6dee4;
}

Then edit your module and apply the class “subtle-shadow” where needed.

That’s it!

Feel free to play around with it. You can apply the style to sections, rows, columns, or individual modules.

I recommend if you do this that you also apply some padding to make things look a bit cleaner (except on sections and rows). 20-40px seems ideal.

Bonus Plugin!

If you want to get that stylish Elegant Themes look on your blog without any coding, I’ve made a plugin for that! Head on over to our shop to download it, it’s free!

Pin It on Pinterest