Create headers with Divi MadMenu 

4 Text Shadow Effects for Divi Post Title and Text Modules

by | Aug 23, 2016 | 38 comments

In this post I am going to share with you some CSS snippets for applying interesting text shadow effects to Divi Post Title and Text modules. I came across these effects here on codepen.io and I really liked them and decided to implement for Divi.

Very simple implementation, check out how they look like below and feel free to use the CSS for your projects.

Simply copy and paste the CSS provided below into your child theme’s style.css file or into Divi -> Theme Options -> Custom CSS and then add any of these CSS classes(depending on which shadow effect you want to apply) to the Post Title module or Text module Advanced tab->CSS Class field: elegantshadow, deepshadow, insetshadow and retroshadow.

The CSS will add shadow effects to h1 tag of Post Title module and h1 and p tags of Text module but you can change the selectors so that it works for other heading levels, links, etc.

Elegant Shadow

h1: ELEGANT SHADOW

p: ELEGANT SHADOW

Deep Shadow

h1: DEEP SHADOW

p: DEEP SHADOW

Inset Shadow

h1: INSET SHADOW

p: INSET SHADOW

Retro Shadow

h1: RETRO SHADOW

p: RETRO SHADOW

Text Shadow CSS Snippets

Elegant Shadow

Your Subtitle Goes Here
/*** Elegant Shadow ***/
.et_pb_post_title.elegantshadow h1,
.et_pb_text.elegantshadow h1,
.et_pb_text.elegantshadow p {
    color: #131313;
    background-color: #e7e5e4;
    letter-spacing: .15em;
    text-shadow: 1px -1px 0 #767676, 
-1px 2px 1px #737272, 
-2px 4px 1px #767474, 
-3px 6px 1px #787777, 
-4px 8px 1px #7b7a7a, 
-5px 10px 1px #7f7d7d, 
-6px 12px 1px #828181, 
-7px 14px 1px #868585, 
-8px 16px 1px #8b8a89, 
-9px 18px 1px #8f8e8d, 
-10px 20px 1px #949392, 
-11px 22px 1px #999897, 
-12px 24px 1px #9e9c9c, 
-13px 26px 1px #a3a1a1, 
-14px 28px 1px #a8a6a6, 
-15px 30px 1px #adabab, 
-16px 32px 1px #b2b1b0, 
-17px 34px 1px #b7b6b5, 
-18px 36px 1px #bcbbba, 
-19px 38px 1px #c1bfbf, 
-20px 40px 1px #c6c4c4, 
-21px 42px 1px #cbc9c8, 
-22px 44px 1px #cfcdcd, 
-23px 46px 1px #d4d2d1, 
-24px 48px 1px #d8d6d5, 
-25px 50px 1px #dbdad9, 
-26px 52px 1px #dfdddc, 
-27px 54px 1px #e2e0df, 
-28px 56px 1px #e4e3e2;
}
/*** END Elegant Shadow ***/

Deep Shadow

Your Subtitle Goes Here
/*** Deep Shadow ***/
.et_pb_post_title.deepshadow h1,
.et_pb_text.deepshadow h1,
.et_pb_text.deepshadow p {
    color: #e0dfdc;
    background-color: #333;
    letter-spacing: .1em;
    text-shadow: 0 -1px 0 #fff, 
0 1px 0 #2e2e2e, 
0 2px 0 #2c2c2c, 
0 3px 0 #2a2a2a, 
0 4px 0 #282828, 
0 5px 0 #262626, 
0 6px 0 #242424, 
0 7px 0 #222222, 
0 8px 0 #202020, 
0 9px 0 #1e1e1e, 
0 10px 0 #1c1c1c, 
0 11px 0 #1a1a1a, 
0 12px 0 #181818, 
0 13px 0 #161616, 
0 14px 0 #141414, 
0 15px 0 #121212, 
0 22px 30px rgba(0, 0, 0, 0.9);
}
/*** END Deep Shadow ***/

Inset Shadow

Your Subtitle Goes Here
/*** Inset Shadow ***/
.et_pb_post_title.insetshadow h1,
.et_pb_text.insetshadow h1,
.et_pb_text.insetshadow p {
    color: #202020;
    background-color: #2d2d2d;
    letter-spacing: .1em;
    text-shadow: -1px -1px 1px #111, 2px 2px 1px #363636;
}
/*** END Inset Shadow ***/

Retro Shadow

Your Subtitle Goes Here
/*** Retro Shadow ***/
.et_pb_post_title.retroshadow h1,
.et_pb_text.retroshadow h1,
.et_pb_text.retroshadow p {
    color: #2c2c2c;
    background-color: #d5d5d5;
    letter-spacing: .05em;
    text-shadow: 4px 4px 0px #d5d5d5, 7px 7px 0px rgba(0, 0, 0, 0.2);
}
/*** END Retro Shadow ***/
Hope you’ll find these snippets useful. Feel free to share your thoughts and suggestions below and don’t forget to share this post with your friends! 😉

Subscribe To Our Newsletter

Join our mailing list to download Divi freebies and get notified of our discounts, latest news and updates.

You have Successfully Subscribed! Please confirm your email address.

Divi MadMenu Coming Soon!

Join our mailing list to get notified when the Divi MadMenu module is released! Check out the sneak peek...

You have Successfully Subscribed! Please confirm your email address.

Pin It on Pinterest

Shares
Share This