CSS text shadow / gradient / stroke

by ian_smithz

HTML

<link href="https://fonts.googleapis.com/css?family=Alegreya" rel="stylesheet">

<h1 class="emboss emboss--lg emboss--black" data-text="Cake">Cake</h1>
<h1 class="emboss emboss--lg emboss--white" data-text="Cake">Cake</h1>

<h2 class="emboss emboss--md emboss--black" data-text="Cake">Cake</h2>
<h2 class="emboss emboss--md emboss--white" data-text="Cake">Cake</h2>

<h3 class="emboss emboss--sm emboss--black" data-text="Cake">Cake</h3>
<h3 class="emboss emboss--sm emboss--white" data-text="Cake">Cake</h3>

<p>
<a href="http://www.colorzilla.com/gradient-editor/#959595+0,0d0d0d+8,6b6b6b+15,000000+23,6b6b6b+32,070707+39,6b6b6b+46,111111+53,6b6b6b+61,0c0c0c+69,6b6b6b+77,0a0a0a+85,6b6b6b+92,1b1b1b+100">Tweak the black gradient with Ultimate CSS Gradient Generator</a>
</p>

<p>
<a href="http://www.colorzilla.com/gradient-editor/#ffffff+0,ededed+8,ffffff+17,ededed+25,ffffff+34,f3f3f3+44,ffffff+55,ededed+65,ffffff+75,ededed+84,ffffff+92,ededed+100">Tweak the white gradient with Ultimate CSS Gradient Generator</a>
</p>

<p>The text shadow values are: x-offset y-offset blur</p>

<pre>e.g. text-shadow: 6px 6px 9px rgba(0, 0, 0, 0.5);</pre>

CSS

/* base styles */

.emboss {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position:relative;
}
.emboss:after {
  content: attr(data-text);
  left: 0;
  position: absolute;
  top: 0;
  z-index: -1;
}


/* modifier size styles */

.emboss--lg {
  font: 160px 'Alegreya', serif;
}

.emboss--md {
  font: 120px 'Alegreya', serif;
}

.emboss--sm {
  font: 80px 'Alegreya', serif;
}


/* modifier colour styles */

.emboss--black {
  background-image: -webkit-linear-gradient(43deg, #959595 0%, #0d0d0d 8%, #636363 15%, #000000 23%, #636363 31%, #070707 38%, #636363 45%, #111111 53%, #636363 63%, #0c0c0c 69%, #636363 77%, #0a0a0a 85%, #636363 92%, #1b1b1b 100%);
  text-shadow: 4px 4px 2px rgba(0, 0, 0, 0.5);
  -webkit-text-stroke: 2px #000;
}
.emboss--black:after {
  text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.1);
}
/* text shadow and stroke need a tweak at medium size */
.emboss--md.emboss--black {
  text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.5);
}
/* text shadow and stroke need a tweak at small size */
.emboss--sm.emboss--black {
  text-shadow: 3px 3px 1px rgba(0, 0, 0, 0.5);
  -webkit-text-stroke: 1px #000;
}



.emboss--white {
  background-image: -webkit-linear-gradient(45deg, #ffffff 0%, #ededed 8%, #ffffff 17%, #ededed 25%, #ffffff 34%, #f3f3f3 44%, #ffffff 55%, #ededed 65%, #ffffff 75%, #ededed 84%, #ffffff 92%, #ededed 100%);
  text-shadow: 5px 5px 7px rgba(0, 0, 0, 0.1);
  -webkit-text-stroke: 2px #b3b3b3;
}
.emboss--white:after {
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
}
/* text shadow and stroke need a tweak at small size */
.emboss--sm.emboss--white {
  text-shadow: 3px 3px 1px rgba(0, 0, 0, 0.1);
  -webkit-text-stroke: 1px #b3b3b3;
}




/* just for this demo */

h1, h2, h3 {
  margin: 0;
  line-height: 1!important;
}

body{
    background-color: #abdc28;
}