4 Text Shadow Effects for Divi Post Title and Text Modules
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 ***/
This is a great post. Is there a way to use this to change the Page Header Title Font (not the module title)? I am also a newbie and love using Divi so far, but would really like the Title Font to pop more against the background image. Thank you!
Hi Valerie, thanks for stopping by.
Do you mean applying these shadows to the Fullwidth Header module? I haven’t tried that but it should work, just need to change the CSS selectors accordingly.
Thank you so much! Generous of you to offer.
You are welcome, Susie :) Thanks for your comment.
It work, thank u so much.
Can u check out why it looks different than the example above?
Thanx again
Actually it looks the same, but you need to experiment with the background, font size, shadow length till you achieve the desired result.
Thanx for the fast reply.
The one that says “Zurich plus”
Please find these two lines in your Custom CSS:
#main-header {display:none;#main-footer {display:none;
You omitted closing ‘}’ for both of them, that’s why CSS below these lines does not work.
Hi, I want to thank you for sharing this amazing shadow effect.
But is not working for me.
Can you check my website and point me in the right direction?
http://www.fotokmexico.com/igoto
Thanx in advance
Hi Emilio. Which text are you trying to apply this effect to?
Great post ! I would love to know how do you set the featured image, post title and meta full with even with a sidebar ??
Thanks for your help !
Hi Lily.
After you enable Divi Builder for post, set the Page Layout to “Full Width” and Post Title to “Hide”. Then use the Post Title Module with a Standart Section with one row. You can show/hide post meta in the Post Title Module Settings. Below this section add a Speciality Section with a column where you can add the Sidebar Module. Featured image is set as usually with or without the Divi Builder.
Hope this is helpful :).
Hi Ivan, thank you for sharing your secret wizard tricks with the rest of us. I’m a total noob at code (I’ve been editing colors & margins in CSS templates but that’s about it). I tried to follow your instructions and it isn’t working for me… I’m wondering if you can point me in the right direction. I literally copied and pasted the code into the bottom of my Child theme’s stylesheet. I then wrote the word elegantshadow into the CSS class field of my text module. It isn’t showing up on my page. Here’s the URL: http://fokustea.sitesbyscs.com (<– that URL is switching to fokustea.com tomorrow). The shadow should be on the words "Delicious Neuroscience". Any idea what I did wrong?
Hi Regina.
You did everything right and the code works fine, just clear your browser cache :). The only thing I would change is the background, try experimenting with it until you achieve the best result.
You’re right, I didn’t realize the editor code didn’t update itself in my preview of the page. Thanks for everything! I think I just accidentally learned to read CSS code.
Thank you for the hard work! Is it possible to reduce the distance of the dropshadow with deepshadow? If so, where would I change it in the CSS? Thanks
Hi Jason, thanks for asking.
Yes, you can reduce the size of shadow for
deepshadowby removing some values of thetext-shadowproperty. For example, try this:text-shadow: 0 -1px 0 #fff,0 1px 0 #2c2c2c,
0 2px 0 #282828,
0 3px 0 #242424,
0 4px 0 #202020,
0 5px 0 #1c1c1c,
0 6px 0 #181818,
0 7px 0 #141414,
0 8px 30px rgba(0, 0, 0, 0.9);
Hope this is helpful.
Cheers Ivan thats great
HI
IS IT POSSIBLE TO DO THIS EFFECT ON CALL TO ACTION MODULES? SO THIS EFFECT IS ON THE CALL TO ACTION TEXT? THANKS IN ADVANCE
Hi Adam.
Sure, you can implement these effects to CTA Module too, use these selectors(assuming that you want to implement the inset shadow):
.et_pb_promo.insetshadow .et_pb_promo_description h2, /* for CTA heading */.et_pb_promo.insetshadow .et_pb_promo_description p, /* for CTA text */
.et_pb_promo.insetshadow a.et_pb_promo_button /* for CTA button text */ {
color: #202020;
background-color: #2d2d2d;
letter-spacing: .1em;
text-shadow: -1px -1px 1px #111, 2px 2px 1px #363636;
}
Don’t forget to add the
insetshadowclass to your CTA module and apply!importantdeclarations if neccessary. Hope this is helpful.Hi Ivan,
Thanks for posting this as I have been trying to find ways of adding shadows to my text for ages!
A little bit unrelated but would you know how to add a simple outline to a subheading text on a fullwidth module in Divi? I have white text on a whitish background and I don’t want to change the colour.
Any help would be greatly appreciated.
Thanks,
Stephen
Hi Stephen. Please check out this post, there is an outline effect for Divi text module, I think it is something you’re looking for, just change the white color of outline to whatever color you need. And if you want to apply this outline effect to Fullwidth Header subheading text, then you have to use
.et_pb_fullwidth_header.outline .header-content span.et_pb_fullwidth_header_subheadselector instead of.et_pb_text.outline h2.Hope this is helpful.
Thanks a million Ivan! Will give it a go now. Sorry about the late reply, I changed the colour after all the frustration and completely forgot. Will change it back now as it looks pretty bad.
Thanks again!
You’re welcome, Stephen ;)
do you still put the same word IE outline in the same box for full width headers?
Hi Tommy,
yes, you need to put the CSS class (i.e. outline) inside the CSS Class text field but for the effect to work you’ll have to adjust the CSS selector accordingly depending on which text you want the outline effect to be applied to.
Hey, love these shadows! My only problem is that I’m not sure how to implement it. I read the other comments about this but I still can’t get it to work for me. I’m trying to add it to a slider and i want the shadow on the slider’s description. I’m using insetshadow.
So this is what I did: I added the code to the divi theme option css section and then in the slider settings custom css under slide description, i have “insetshadow;” – nothing happens. The text is as normal. Any suggestions?
Hi Kara. Thank you for asking this question.
The CSS snippets provided in this post will not work for Slider module as the name of this post implies (“…for Divi Post Title and Text Modules”). But it is ok, with a little bit of tweaking we can make the insetshadow (and any of these shadows) work for Slider module too, all you need to do is to use the appropriate css selector. Here is the css code you need to use to apply insetshadow to the Slider module title:
.et_pb_slider.insetshadow .et_pb_slide .et_pb_slide_description h2.et_pb_slide_title {color: #202020 !important;
background-color: #2d2d2d !important;
letter-spacing: .1em;
text-shadow: -1px -1px 1px #111, 2px 2px 1px #363636;
}
I tested it and it works. Hope this is helpful.
Hi,
Thanks for checking on it for me and looking at the stylesheet. I’ve typed it manually and it’s working perfectly thanks so much once again for helping me I really appreciate it and thanks for providing all these amazing tutorials.
You’re welcome, Kate. I checked you page again, now it looks great :) I am glad it worked for you and I really appreciate your feedback, thank you.
Heres my url: kateswebdesign.com
I’m using the elegantshadow css and the child theme stylesheet.
Thanks for taking a look.
I checked your child theme style.css file, looks like there are some extra characters inserted before CSS properties, hence they are not recognized. Make sure the code is copied properly or try to type it into your stylesheet manually.
Hi,
Thanks for replying to me. I’ve tried to add the css code to my site and it’s not working the text is just displaying as normal.
It should work, maybe you are missing something. Can you please provide the URL?
I absolutely love the text shadows I’m just a little confused on how to implement them. Do I add the code to my child theme style.css sheet then when I use the text module would I use the h1 tags, then in the css section would I use say the darkshadow css tag would I put that in the css id or the css class section?
Thanks
Hi Kate.
Add css code to your child theme style.css, then go to Text Module Settings -> Custom CSS and add the “darkshadow” class in CSS Class section. For text module you can use both h1 and p tags. Hope this is helpful.
Great work, Thank you
Thanks Edwin. Love sharing useful stuff :)