Pattern Background in Blurb Module in Divi

The majority of this inspiration came from this article.

The first effect is a subtle light shadow to accent black text on a black/grey background.  Obviously getting light on dark or dark on light work, but getting dark on dark seems to work better than ‘light on light’ with this nifty and subtle text-shadow effect:

text-shadow: 0px 1px 1px #4d4d4d;
background-image : url("http://orangepulley.com/wp-content/uploads/2015/09/black-mosaic-tiles.png");

That’s all fine and well, but can we apply the same concept to, say, a Divi blurb module?  Yup…

.blurb-1 .et-pb-icon {
 border: 3px solid;
 border-color: #000000;
 font-size: 48px;
 -moz-border-radius: 100px;
 -webkit-border-radius: 100px;
 border-radius: 100px;
 padding: 25px;
 background-image : url("http://orangepulley.com/wp-content/uploads/2015/09/black-jeans-texture.png");
 text-shadow: 0px 1px 1px #4d4d4d;
 }

The second is similar, but adds a top white shadow as well  which creates an ’embossed’ look:

text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
background-image : url("http://orangepulley.com/wp-content/uploads/2015/09/black-jeans-texture.png");

Now what about combining them for a ‘pop-out’ transformation?

.blurb-2 .et-pb-icon {
 border: 3px solid;
 border-color: #000000;
 font-size: 48px;
 -moz-border-radius: 100px;
 -webkit-border-radius: 100px;
 border-radius: 100px;
 padding: 25px;
 background-image : url("http://orangepulley.com/wp-content/uploads/2015/09/black-jeans-texture.png");
 text-shadow: 0px 1px 1px #4d4d4d;
 transition: all 800ms ease;
}
.blurb-2 .et-pb-icon:hover {
 color:#222 !important;
 text-shadow: 0px -1px 1px #ddd;
}

Or maybe the opposite?

.blurb-3 .et-pb-icon {
 border: 3px solid;
 border-color: #000000;
 font-size: 48px;
 -moz-border-radius: 100px;
 -webkit-border-radius: 100px;
 border-radius: 100px;
 padding: 25px;
 background-image : url("http://orangepulley.com/wp-content/uploads/2015/09/black-jeans-texture.png");
 text-shadow: 0px -1px 1px #ddd;
 transition: all 800ms ease;
}
.blurb-3 .et-pb-icon:hover {
 color:#000 !important;
 text-shadow: 0px 1px 1px #4d4d4d;
}

The next effect (RETRO) works by adding hefty letter spacing and dropping two cascading layers, one dark and one light:

  color: #d7ceb2;
  text-shadow: 3px 3px 0px #2c2e38, 5px 5px 0px #5c5f72;
  letter-spacing: 10px;