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");

THIS IS AWESOME

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;
 }

Cool Title

Cool circle effect

 

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");

THIS IS AWESOME

 

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;
}

Cool Title

Cool circle effect

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;
}

Cool Title

Cool circle effect

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;

THIS IS AWESOME