4 Text Shadow Effects for Divi Post Title and Text Modules

by | Aug 23, 2016 | 36 comments

In this post I am going to share with you some CSS code 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. Quite a simple implementation, check out below how they look and feel and feel free to use the CSS for your projects. Paste the CSS code into your child theme’s style.css file or into Divi -> Theme Options -> Custom CSS and add any of these CSS classes(depending on which shadow effect you want to apply) to the Post Title module or Text module Custom CSS section: elegantshadow, deepshadow, insetshadow and retroshadow. The CSS will effect h1 tag of Post Title module and h1 and p tags of Text module.

#1 – Elegant Shadow

h1: ELEGANT SHADOW

p: ELEGANT SHADOW

#2 – Deep Shadow

h1: DEEP SHADOW

p: DEEP SHADOW

#3 – Inset Shadow

h1: INSET SHADOW

p: INSET SHADOW

#4 – Retro Shadow

h1: RETRO SHADOW

p: RETRO SHADOW

#1 - Elegant Shadow


/* #1 - 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;
}

#2 - Deep Shadow


/* #2 - 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);
}

#3 - Inset Shadow


/* #3 - 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;
}

#4 - Retro Shadow


/* #4 - 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);
}

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! 😉

Pin It on Pinterest

Shares
Share This