8 CSS Text Shadows for Divi Text Module

by | Sep 19, 2016 | 2 comments

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!

Pin It on Pinterest

Shares
Share This