8 CSS Text Shadows for Divi Text Module

by | Sep 19, 2016 | 2 comments

In my earlier post I shared 4 awesome text shadow effects and this time I would like to share with you 8 more CSS text shadow effects, please check out the demo below. They look cool and can be easily applied, but please note 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 effects and the background(just like in the original demo) but it is fine to use other color too.

DEMO

#2 – Outline

#3 – Offset

#4 – Fade

#5 – Diagonal

#6 – Cross

#7 – Fuzzy

#8 – STRIPE

STEP 1: Add the CSS class indicated for each shadow effect below to the Text Module Settings like this:

STEP 2: 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.

#1 - Invisible (use the 'invisible' CSS class)
 
/* 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;
} 
#2 - Outline (use the 'outline' CSS class)
/* 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;
}
#3 - Offset (use the 'offset' CSS class)
/* 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;
}
#4 - Fade (use the 'fade' CSS class)
/* 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;
}
#5 - Diagonal (use the 'diagonal' CSS class)
/* 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;
}
#6 - Cross (use the 'cross' CSS class)
/* 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;
}
#7 - Fuzzy (use the 'fuzzy' CSS class)
/* 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;
}
#8 - Stripe (use the 'stripe' CSS class)
/* 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;
}

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