8 CSS Text Shadows for Divi Text Module
In my earlier post I shared 4 text shadow effects and in this post I would like to share another 8 text shadow effects, please check out the demo below.
They look cool and can be easily applied, but beware that some of these effects may work for one font family while look ugly with others.
So, you might need to experiment with font family and font size until you achieve the desired result. I used the black color for the effects and the background (just like in the original demo) but it is ok to use other colors too.
Demo
#1 – Invisible
#2 – Outline
#3 – Offset
#4 – Fade
#5 – Diagonal
#6 – Cross
#7 – Fuzzy
#8 – STRIPE
Assign CSS classes
Add the CSS class indicated for each shadow effect below to the Text Module Settings like this:
Text shadow effects CSS snippets
Bellow are the text shadow effects CSS snippets, copy and paste them into Divi -> Theme Options -> Custom CSS field or to child theme style.css file.
Invisible
CSS Class: invisible
/*** Invisible Text Shadow ***/
.et_pb_text.invisible h1,
.et_pb_text.invisible h2,
.et_pb_text.invisible p {
color: #000 !important;
text-shadow: white .04em .04em 0;
}
/*** END Invisible Text Shadow ***/
Outline
CSS Class: outline
/*** Outline Text Shadow ***/
.et_pb_text.outline h1,
.et_pb_text.outline h2,
.et_pb_text.outline p {
color: #000 !important;
text-shadow: white .02em 0 0,
white 0 .02em 0,
white -.02em 0 0,
white 0 -.02em 0;
}
/*** END Outline Text Shadow ***/
Offset
CSS Class: offset
/*** Offset Text Shadow ***/
.et_pb_text.offset h1,
.et_pb_text.offset h2,
.et_pb_text.offset p {
text-shadow: black .05em .05em 0,
white .08em .08em 0;
}
/*** END Offset Text Shadow ***/
Fade
CSS Class: fade
/*** Fade Text Shadow ***/
.et_pb_text.fade h1,
.et_pb_text.fade h2,
.et_pb_text.fade p {
text-shadow: rgba(255,255,255,.5) .02em .02em,
rgba(255,255,255,.4) .04em .04em,
rgba(255,255,255,.3) .06em .06em,
rgba(255,255,255,.2) .08em .08em,
rgba(255,255,255,.1) .1em .1em;
}
/*** END Fade Text Shadow ***/
Diagonal
CSS Class: diagonal
/*** Diagonal Text Shadow ***/
.et_pb_text.diagonal h1,
.et_pb_text.diagonal h2,
.et_pb_text.diagonal p {
color: black;
text-shadow: white -.02em 0 0,
white -.06em -.02em 0,
white -.1em -.03em 0,
white -.14em -.06em 0,
white .02em .02em 0;
}
/*** END Diagonal Text Shadow ***/
Cross
CSS Class: cross
/*** Cross Text Shadow ***/
.et_pb_text.cross h1,
.et_pb_text.cross h2,
.et_pb_text.cross p {
font-family: 'Open Sans', sans-serif;
color: black;
text-shadow: white .02em -.02em 0,
white .04em -.04em 0,
white .06em -.06em 0,
white .08em -.08em 0,
white .1em -.1em 0,
white -.02em .02em 0,
white -.04em .04em 0,
white -.06em .06em 0,
white -.08em .08em 0,
white -.1em .1em 0;
}
/*** END Cross Text Shadow ***/
Fuzzy
CSS Class: fuzzy
/*** Fuzzy Text Shadow ***/
.et_pb_text.fuzzy h1,
.et_pb_text.fuzzy h2,
.et_pb_text.fuzzy p {
color: transparent !important;
text-shadow: white 0 0 .1em;
}
/*** END Fuzzy Text Shadow ***/
Stripe
CSS Class: stripe
/*** Stripe Text Shadow ***/
.et_pb_text.stripe h1,
.et_pb_text.stripe h2,
.et_pb_text.stripe p {
color: black;
text-shadow: white .02em 0 0,
white 0 .02em 0,
white -.02em 0 0,
white 0 -.02em 0,
black .06em 0 0,
black .06em .06em 0,
black 0 .06em 0,
black -.06em .06em 0,
black -.06em 0 0,
black -.06em -.06em 0,
black 0 -.06em 0,
black .06em -.06em 0,
white .08em 0 0,
white .08em .08em 0,
white 0 .08em 0,
white -.08em .08em 0,
white -.08em 0 0,
white -.08em -.08em 0,
white 0 -.08em 0,
white .08em -.08em 0;
}
/*** END Stripe Text 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! ;) Cheers!
well done works awesome thank you
Can these be applied to sliders or other modules besides text modules?
Hello! Thanks for the CSS styles!
I’ve followed your tutorial for adding the code to the custom CSS in the theme options, but I cannot seem to see the styles being applied to the text module I assign the class to.
Can you assist me on this? I’ve tried a handful of basic system fonts as well. I’m using a child theme for Divi, and I have not tried adding the code to the style.css yet.
Hi Jacob.
Thanks for asking for help. Can you please provide the URL? I need to take a look.