a href='http://www.sitepoint.com/mastering-css3-7-cool-text-shadow-samples-you-can’t-miss/' @via Mastering CSS3: 7 cool text shadow samples you can't miss
p (whithout spread-distance)
.arcade-love Arcade love ♥
.color-happiness Color happiness
.chocolate Chocolate
.yeah Yeah! :)
.take-it Take it!
.draw Draw
.up-down Up and down
View Compiled
@import url(https://fonts.googleapis.com/css?family=Titan+One);
@import url(https://fonts.googleapis.com/css?family=Miniver);
@import url(https://fonts.googleapis.com/css?family=Henny+Penny);
@import url(https://fonts.googleapis.com/css?family=Frijole);
@import url(https://fonts.googleapis.com/css?family=Caesar+Dressing);
@import url(https://fonts.googleapis.com/css?family=Chewy);

body {
	font-family: sans-serif;  
}

div {  
  font-size: 52px;
  margin: 10px;
}

.arcade-love {
  font-family: "Titan One";
  color: hsl(80, 70%, 55%);  
	text-shadow: 0 0 2px #fff,
             /* embossed text */
             -1px -1px 0 hsl(80, 70%, 35%),
             -2px -2px 1px hsl(80, 70%, 35%),
             /* transition to substrate */
             -2px -2px 2px hsl(80, 10%, 15%),
             /* substrate */
             -2px -2px 0 hsl(60, 80%, 95%),
             -3px -3px 0 hsl(60, 10%, 65%),
             -4px -4px 0 hsl(60, 10%, 65%),
             -5px -5px 0 hsl(60, 10%, 65%),
             -6px -6px 0 hsl(60, 10%, 65%),
             /* shadow for substrate */
             -7px -7px 4px hsl(60, 10%, 40%),
             -8px -8px 6px hsl(60, 10%, 55%);
}

.color-happiness {
  font-family: "Titan One";
	color: hsl(330, 100%, 50%);
	text-shadow: 0 2px 0 hsl(330, 100%, 25%),
             0 3px 2px hsla(330, 100%, 15%, 0.5),
             /* next */
             0 3px 0 hsl(350, 100%, 50%),
             0 5px 0 hsl(350, 100%, 25%),
             0 6px 2px hsla(350, 100%, 15%, 0.5),
             /* next */
             0 6px 0 hsl(20, 100%, 50%),
             0 8px 0 hsl(20, 100%, 25%),
             0 9px 2px hsla(20, 100%, 15%, 0.5),
             /* next */
             0 9px 0 hsl(50, 100%, 50%),
             0 11px 0 hsl(50, 100%, 25%),
             0 12px 2px hsla(50, 100%, 15%, 0.5),
             /* next */
             0 12px 0 hsl(70, 100%, 50%),
             0 14px 0 hsl(70, 100%, 25%),
             0 15px 2px hsla(70, 100%, 15%, 0.5),
             /* next */
             0 15px 0 hsl(90, 100%, 50%),
             0 17px 0 hsl(90, 100%, 25%),
             0 17px 2px hsla(90, 100%, 15%, 0.5);
}

.chocolate {
  font-family: "Miniver";  
	color: hsl(20, 100%, 20%);
	text-shadow: 0 0 1px hsl(20, 100%, 18%),
             -1px 1px 0 hsl(20, 100%, 16%),
             -2px 2px 2px hsl(20, 100%, 14%),
             -4px 4px 2px hsl(20, 100%, 12%),
             -6px 6px 3px hsl(20, 100%, 10%),
             -8px 8px 2px hsl(20, 100%, 9%),
             -10px 10px 3px hsl(20, 100%, 8%),
             -12px 12px 2px hsl(20, 100%, 7%),
             -14px 14px 2px hsl(20, 100%, 6%),
             -15px 15px 2px hsl(20, 100%, 5%),
             -15px 15px 0 hsla(20, 50%, 10%, 0.25);
}

.yeah {
  font-family: "Henny Penny";
  color: hsl(35, 100%, 30%);
  background: hsl(35, 60%, 80%);
  text-shadow: 0 0 2px hsl(35, 70%, 30%),
               /* transition to substrate */
                0 0 4px hsla(30, 100%, 55%, 0.5),
               /* substrate */
               -1px 1px 2px hsl(45, 60%, 95%),
               /* adding volume */
               -3px 3px 1px hsl(35, 70%, 30%),
               /* transition to background */
               -3px 3px 4px hsla(30, 90%, 55%, 0.5);
}

.take-it {
  font-family: "Frijole";
  color: hsl(65, 60%, 20%);
	background: hsl(65, 60%,95%);
	text-shadow: 0 0 3px hsl(65, 60%,75%),
            /* light substrate */
             0 0 1px hsl(65, 60%,95%),
            /* blurring */
             0 0 4px hsla(65, 100%, 30%, 0.4),
            /* cutting substrate pieces */
            6px 6px 4px hsl(65, 60%,95%),
            -4px -6px 4px hsl(65, 60%,95%),
            /* dark outlining */
             0 0 1px hsl(65, 60%, 20%);
}

.draw {
  font-family: "Caesar Dressing";
  color: transparent;
  background: hsl(0, 75%,45%);
  text-shadow: 3px 3px 1px hsla(0, 60%, 100%, 0.75),
               -1px -1px 1px hsla(0, 60%, 100%, 0.65),
               1px 1px 1px hsla(0, 60%, 100%, 0.65),
               /* background */
               0 0 1px hsla(0, 60%, 100%, 0.65),
               /* additional details */
               -3px -3px 1px hsla(0, 60%, 100%, 0.25),
               3px 3px 1px hsla(0, 60%, 100%, 0.25);
}

.up-down {
  font-family: "Chewy";
  color: transparent;
  text-shadow: -4px 4px hsla(0, 0%, 70%, .4),
               -3px 3px hsla(0, 0%, 60%, .2),
               -2px 2px hsla(0, 0%, 70%, .2),
               -1px 1px hsla(0, 0%, 70%, .2),
               0px 0px hsla(0, 0%, 50%, .5),
               1px -1px hsla(0, 0%, 30%, .6),
               2px -2px hsla(0, 0%, 30%, .7),
               3px -3px hsla(0, 0%, 32%, .8),
               4px -4px hsla(0, 0%, 30%, .9),
               5px -5px hsla(0, 0%, 30%, 1.0);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.