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.

Pin It on Pinterest

Justin Boughton Logo

Subscribe  For More Tips

Join my mailing list to get the latest tips delivered straight to your inbox! Don't worry, I hate spam, so I'll never spam you, and I'll never give your information to anyone else.

You have Successfully Subscribed!