10+ CSS Text Shadow Effect Examples

This post contains a total of 10+ CSS Text Shadow Effect Examples with Source Code. All these Text Shadow Effects are made using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

CSS Text Shadow Effect Examples

1. Long Shadow Gradient Mixin

Made by roikles. Source

Long Shadow Gradient Mixin
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
@import url(https://fonts.googleapis.com/css?family=Lato:700,900);
/**
 * A Long-shadow mixin, guaranteed to make your Dribbble shots 11% cooler
 * @param  string  $color_a  The darkest colour (closest the object)
 * @param  string  $color_b  The lightest colour (often the background colour)
 * @param  int     $stepnum  Number of steps
 * @param  int     $opacity  The opacity of the blend
 * @return list         	   Returns a list ready to drop into 'box-shadow' or text-shadow
 */
body {
  background: #e74c3c;
}

.text-longshadow {
  color: #fff;
  font-size: 8rem;
  line-height: 8rem;
  font-family: "lato", sans-serif;
  font-weight: 900;
  text-align: center;
  text-shadow:  1px 1px rgba(123, 25, 15, 0.5) , 2px 2px rgba(129, 28, 18, 0.51) , 3px 3px rgba(135, 31, 20, 0.52) , 4px 4px rgba(140, 33, 22, 0.53) , 5px 5px rgba(145, 36, 24, 0.54) , 6px 6px rgba(150, 38, 26, 0.55) , 7px 7px rgba(154, 40, 28, 0.56) , 8px 8px rgba(158, 42, 30, 0.57) , 9px 9px rgba(162, 44, 31, 0.58) , 10px 10px rgba(166, 45, 33, 0.59) , 11px 11px rgba(169, 47, 34, 0.6) , 12px 12px rgba(173, 48, 36, 0.61) , 13px 13px rgba(176, 50, 37, 0.62) , 14px 14px rgba(178, 51, 38, 0.63) , 15px 15px rgba(181, 52, 39, 0.64) , 16px 16px rgba(184, 54, 40, 0.65) , 17px 17px rgba(186, 55, 41, 0.66) , 18px 18px rgba(189, 56, 42, 0.67) , 19px 19px rgba(191, 57, 43, 0.68) , 20px 20px rgba(193, 58, 44, 0.69) , 21px 21px rgba(195, 59, 45, 0.7) , 22px 22px rgba(197, 60, 46, 0.71) , 23px 23px rgba(199, 61, 47, 0.72) , 24px 24px rgba(201, 62, 47, 0.73) , 25px 25px rgba(202, 62, 48, 0.74) , 26px 26px rgba(204, 63, 49, 0.75) , 27px 27px rgba(206, 64, 49, 0.76) , 28px 28px rgba(207, 65, 50, 0.77) , 29px 29px rgba(209, 65, 51, 0.78) , 30px 30px rgba(210, 66, 51, 0.79) , 31px 31px rgba(211, 67, 52, 0.8) , 32px 32px rgba(213, 67, 52, 0.81) , 33px 33px rgba(214, 68, 53, 0.82) , 34px 34px rgba(215, 69, 53, 0.83) , 35px 35px rgba(216, 69, 54, 0.84) , 36px 36px rgba(218, 70, 54, 0.85) , 37px 37px rgba(219, 70, 55, 0.86) , 38px 38px rgba(220, 71, 55, 0.87) , 39px 39px rgba(221, 71, 56, 0.88) , 40px 40px rgba(222, 72, 56, 0.89) , 41px 41px rgba(223, 72, 57, 0.9) , 42px 42px rgba(224, 73, 57, 0.91) , 43px 43px rgba(225, 73, 57, 0.92) , 44px 44px rgba(225, 73, 58, 0.93) , 45px 45px rgba(226, 74, 58, 0.94) , 46px 46px rgba(227, 74, 58, 0.95) , 47px 47px rgba(228, 75, 59, 0.96) , 48px 48px rgba(229, 75, 59, 0.97) , 49px 49px rgba(230, 75, 59, 0.98) , 50px 50px rgba(230, 76, 60, 0.99);
}
</style>
</head>
<body>
  <h1 class="text-longshadow">
    Text with<br> 
    a long shadow.<br> 
    How hip!
</h1>
</body>
</html>

2. 3D Cartoon Text with CSS text-shadow

Made by Fielding Johnston. Source

3D Cartoon Text with CSS text-shadow
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Luckiest+Guy'>
  
<style>
body {
  background-color: #fc3153;
  text-align: center;
}

h1 {
  font-size: 144pt;
  font-family: 'Luckiest Guy';
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-shadow:   0px -6px 0 #212121,  
                 0px -6px 0 #212121,
                 0px  6px 0 #212121,
                 0px  6px 0 #212121,
                -6px  0px 0 #212121,  
                 6px  0px 0 #212121,
                -6px  0px 0 #212121,
                 6px  0px 0 #212121,
                -6px -6px 0 #212121,  
                 6px -6px 0 #212121,
                -6px  6px 0 #212121,
                 6px  6px 0 #212121,
                -6px  18px 0 #212121,
                 0px  18px 0 #212121,
                 6px  18px 0 #212121,
                 0 19px 1px rgba(0,0,0,.1),
                 0 0 6px rgba(0,0,0,.1),
                 0 6px 3px rgba(0,0,0,.3),
                 0 12px 6px rgba(0,0,0,.2),
                 0 18px 18px rgba(0,0,0,.25),
                 0 24px 24px rgba(0,0,0,.2),
                 0 36px 36px rgba(0,0,0,.15);
}
</style>
</head>
<body>
  <h1>FIELDING</h1>
</body>
</html>

3. Funky Retro Text Shadow

Made by Miranda. Source

Funky Retro Text Shadow
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link href="https://fonts.googleapis.com/css2?family=Luckiest+Guy" rel="stylesheet">
<style>
body {
  background: #fffcf6;
  margin: 0;
}

main {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-items: center;
}

h1 {
  color: #f7cfc8;
  font-family: "Luckiest Guy", cursive;
  font-size: 180px;
  letter-spacing: 10px;
  text-align: center;
  text-shadow: -6px -6px #4d84c8, -5px -5px #4d84c8, -4px -4px #4d84c8, -3px -3px #4d84c8, -2px -2px #4d84c8, -1px -1px #4d84c8, 1px 1px #4d84c8, 2px 2px #4d84c8, 3px 3px #4d84c8, 4px 4px #4d84c8, 5px 5px #4d84c8, 6px 6px #4d84c8, 7px 7px #4d84c8, 8px 8px #4d84c8, 9px 9px #4d84c8, 10px 10px #4d84c8, 11px 11px #4d84c8, 12px 12px #4d84c8, 13px 13px #4d84c8, 14px 14px #4d84c8, 15px 15px #4d84c8, 16px 16px #4d84c8, 17px 17px #4d84c8, 18px 18px #4d84c8, 19px 19px #4d84c8, 20px 20px #4d84c8, 21px 21px #4d84c8, 22px 22px #4d84c8, 23px 23px #4d84c8, 24px 24px #4d84c8, 25px 25px #4d84c8, 26px 26px #4d84c8, 27px 27px #4d84c8, 25px 25px #4d84c8, 28px 28px #4d84c8, 29px 29px #4d84c8, 30px 30px #4d84c8, 31px 31px #4d84c8, 32px 32px #4d84c8, 33px 33px #4d84c8, 34px 34px #4d84c8, 35px 35px #4d84c8, 36px 36px #4d84c8, 37px 37px #4d84c8, 38px 38px #4d84c8, 39px 39px #4d84c8, 40px 40px;
  width: 100%;
}
</style>
</head>
<body>
  <main>
  <h1>Funky <br> Fresh</h1>
</main>
</body>
</html>

4. Fancy text shadow

Made by agathaco. Source

Fancy Text Shadow
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
<style>
body {
  margin: 0;
}

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shadows {
  position: relative;
  text-transform: uppercase;
  text-shadow: -15px 5px 20px #ced0d3;
  color: white;
  letter-spacing: -0.05em;
  font-family: "Anton", Arial, sans-serif;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  text-transform: uppercase;
  font-size: 150px;
  transition: all 0.25s ease-out;
}

.shadows:hover {
  text-shadow: -16px 6px 15px #ced0d3;
}
</style>
</head>
<body>
  <div class="container">
  <div class="shadows"><span>s</span><span>h</span><span>a</span><span>d</span><span>o</span><span>w</span><span>s</span></div>
</div>
</body>
</html>

5. Flickering Neon Sign Effect using CSS Text & Box Shadow

Made by George W. Park. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
@import url(https://fonts.googleapis.com/css?family=Exo+2:200i);

:root {
  /* Base font size */
  font-size: 10px;   
  
  /* Set neon color */
  --neon-text-color: #f40;
  --neon-border-color: #08f;
}

body {
  font-family: 'Exo 2', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;  
  background: #000;
  min-height: 100vh;
}

h1 {
  font-size: 13rem;
  font-weight: 200;
  font-style: italic;
  color: #fff;
  padding: 4rem 6rem 5.5rem;
  border: 0.4rem solid #fff;
  border-radius: 2rem;
  text-transform: uppercase;
  animation: flicker 1.5s infinite alternate;     
}

h1::-moz-selection {
  background-color: var(--neon-border-color);
  color: var(--neon-text-color);
}

h1::selection {
  background-color: var(--neon-border-color);
  color: var(--neon-text-color);
}

h1:focus {
  outline: none;
}

/* Animate neon flicker */
@keyframes flicker {
    
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
      
        text-shadow:
            -0.2rem -0.2rem 1rem #fff,
            0.2rem 0.2rem 1rem #fff,
            0 0 2rem var(--neon-text-color),
            0 0 4rem var(--neon-text-color),
            0 0 6rem var(--neon-text-color),
            0 0 8rem var(--neon-text-color),
            0 0 10rem var(--neon-text-color);
        
        box-shadow:
            0 0 .5rem #fff,
            inset 0 0 .5rem #fff,
            0 0 2rem var(--neon-border-color),
            inset 0 0 2rem var(--neon-border-color),
            0 0 4rem var(--neon-border-color),
            inset 0 0 4rem var(--neon-border-color);        
    }
    
    20%, 24%, 55% {        
        text-shadow: none;
        box-shadow: none;
    }    
}
</style>
</head>
<body>
  <h1 contenteditable spellcheck="false">open</h1>
</body>
</html>

6. CSS Dashed Shadow

Made by Lucas Bebber. Source

CSS Dashed Shadow
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
body {
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 85pt;
  background-color: #e8e3c7;
  text-align: center;
  line-height: 1.2em;
  padding-top: 70px;
}

.dashed-shadow {
  position: relative;
  top: 8px;
  left: 8px;
  display: inline-block;
  color: #ba9186;
}

@keyframes dash-animation {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% 0;
  }
}
.dashed-shadow:before {
  content: " ";
  display: block;
  position: absolute;
  top: -8px;
  left: -8px;
  bottom: -2px;
  right: -2px;
  z-index: 1;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIxMi41JSIgc3RvcC1jb2xvcj0iI2U4ZTNjNyIvPjxzdG9wIG9mZnNldD0iMTIuNSUiIHN0b3AtY29sb3I9IiNlOGUzYzciIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSIzNy41JSIgc3RvcC1jb2xvcj0iI2U4ZTNjNyIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjM3LjUlIiBzdG9wLWNvbG9yPSIjZThlM2M3Ii8+PHN0b3Agb2Zmc2V0PSI2Mi41JSIgc3RvcC1jb2xvcj0iI2U4ZTNjNyIvPjxzdG9wIG9mZnNldD0iNjIuNSUiIHN0b3AtY29sb3I9IiNlOGUzYzciIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSI4Ny41JSIgc3RvcC1jb2xvcj0iI2U4ZTNjNyIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9Ijg3LjUlIiBzdG9wLWNvbG9yPSIjZThlM2M3Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
  background-size: 100%;
  background-image: -moz-linear-gradient(45deg, #e8e3c7 12.5%, rgba(232, 227, 199, 0) 12.5%, rgba(232, 227, 199, 0) 37.5%, #e8e3c7 37.5%, #e8e3c7 62.5%, rgba(232, 227, 199, 0) 62.5%, rgba(232, 227, 199, 0) 87.5%, #e8e3c7 87.5%);
  background-image: -webkit-linear-gradient(45deg, #e8e3c7 12.5%, rgba(232, 227, 199, 0) 12.5%, rgba(232, 227, 199, 0) 37.5%, #e8e3c7 37.5%, #e8e3c7 62.5%, rgba(232, 227, 199, 0) 62.5%, rgba(232, 227, 199, 0) 87.5%, #e8e3c7 87.5%);
  background-image: linear-gradient(45deg, #e8e3c7 12.5%, rgba(232, 227, 199, 0) 12.5%, rgba(232, 227, 199, 0) 37.5%, #e8e3c7 37.5%, #e8e3c7 62.5%, rgba(232, 227, 199, 0) 62.5%, rgba(232, 227, 199, 0) 87.5%, #e8e3c7 87.5%);
  background-size: 6px 6px;
}

.dashed-shadow:hover:before {
  animation: dash-animation 30s infinite linear;
}

.dashed-shadow:after {
  z-index: 2;
  content: attr(data-text);
  position: absolute;
  left: -8px;
  top: -8px;
  color: #b85b3f;
  text-shadow: 3px 3px #e8e3c7;
}

.hello {
  font-family: 'Cookie',cursive;
  font-size: 140pt;
}

.sorta-block {
  font-size: 50pt;
  line-height: 1.1em;
  -moz-transform: skew(0, -5deg);
  -ms-transform: skew(0, -5deg);
  -webkit-transform: skew(0, -5deg);
  transform: skew(0, -5deg);
  z-index: 3;
  position: relative;
  margin-top: 20px;
  margin-bottom: 10px;
}

.sorta {
  border-top: 4px solid #b85b3f;
  border-bottom: 4px solid #b85b3f;
  text-transform: uppercase;
  z-index: 3;
  font-style: italic;
}

.hipsterish {
  font-family: 'Sancreek', cursive;
  font-size: 70pt;
}

.dashed-shadow-text {
  font-size: 140pt;
  line-height: 0.7em;
}

.shadow {
  font-size: 120pt;
  line-height: 0.8em;
}
</style>
</head>
<body>
  <link href='https://fonts.googleapis.com/css?family=Cookie' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Sancreek' rel='stylesheet' type='text/css'>

<span data-text="Hello!" class="dashed-shadow hello">Hello!</span>
<br />

<div data-text="This thing is" class="dashed-shadow">This thing is</div> <br />
<div class="sorta-block">
  <div data-text="sort of"class="dashed-shadow sorta">sort of</div> 
</div>
<div data-text="a hipster-ish" class="dashed-shadow hipsterish">a hipster-ish</div> <br />
<div class="dashed-shadow dashed-shadow-text">DASHED<br /><span class="shadow">SHADOW</span></div> <br />
</body>
</html>

7. Complex Text Shadow Examples

Made by Chris Coyier. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
h1 {
  text-align: center;
  font: bold 80px Sans-Serif;
  padding: 40px 0;
}

.simple {
  background: #91877b;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

.otto {
  background: #0e8dbc;
  color: white;
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}

.relief {
  background-color: #3a50d9;
  color: #e0eff2;
  font: italic bold 100px Georgia, Serif;
  text-shadow: -4px 3px 0 #3a50d9, -14px 7px 0 #0a0e27;
}

.close {
  background-color: #fff;	
  color: #202c2d;
  text-shadow:
    0 1px #808d93,
    -1px 0 #cdd2d5,
    -1px 2px #808d93,
    -2px 1px #cdd2d5,
    -2px 3px #808d93,
    -3px 2px #cdd2d5,
    -3px 4px #808d93,
    -4px 3px #cdd2d5,
    -4px 5px #808d93,
    -5px 4px #cdd2d5,
    -5px 6px #808d93,
    -6px 5px #cdd2d5,
    -6px 7px #808d93,
    -7px 6px #cdd2d5,
    -7px 8px #808d93,
    -8px 7px #cdd2d5;
}

.printers {
  background-color: #edde9c;
  color: #bc2e1e;
  text-shadow:
    0 1px 0px #378ab4,
    1px 0 0px #5dabcd,
    1px 2px 1px #378ab4,
    2px 1px 1px #5dabcd,
    2px 3px 2px #378ab4,
    3px 2px 2px #5dabcd,
    3px 4px 2px #378ab4,
    4px 3px 3px #5dabcd,
    4px 5px 3px #378ab4,
    5px 4px 2px #5dabcd,
    5px 6px 2px #378ab4,
    6px 5px 2px #5dabcd,
    6px 7px 1px #378ab4,
    7px 6px 1px #5dabcd,
    7px 8px 0px #378ab4,
    8px 7px 0px #5dabcd;
}

.glow {
  color: #444;
  text-shadow: 
    1px 0px 1px #ccc, 0px 1px 1px #eee, 
    2px 1px 1px #ccc, 1px 2px 1px #eee,
    3px 2px 1px #ccc, 2px 3px 1px #eee,
    4px 3px 1px #ccc, 3px 4px 1px #eee,
    5px 4px 1px #ccc, 4px 5px 1px #eee,
    6px 5px 1px #ccc, 5px 6px 1px #eee,
    7px 6px 1px #ccc;
}

.vamp {
  color: #92a5de;
  background: red;
  text-shadow:0px 0px 0 rgb(137,156,213),1px 1px 0 rgb(129,148,205),2px 2px 0 rgb(120,139,196),3px 3px 0 rgb(111,130,187),4px 4px 0 rgb(103,122,179),5px 5px 0 rgb(94,113,170),6px 6px 0 rgb(85,104,161),7px 7px 0 rgb(76,95,152),8px 8px 0 rgb(68,87,144),9px 9px 0 rgb(59,78,135),10px 10px 0 rgb(50,69,126),11px 11px 0 rgb(42,61,118),12px 12px 0 rgb(33,52,109),13px 13px 0 rgb(24,43,100),14px 14px 0 rgb(15,34,91),15px 15px 0 rgb(7,26,83),16px 16px 0 rgb(-2,17,74),17px 17px 0 rgb(-11,8,65),18px 18px 0 rgb(-19,0,57),19px 19px 0 rgb(-28,-9,48), 20px 20px 0 rgb(-37,-18,39),21px 21px 20px rgba(0,0,0,1),21px 21px 1px rgba(0,0,0,0.5),0px 0px 20px rgba(0,0,0,.2);
}
</style>
</head>
<body>
  <h1 class="simple">
  Monster Mash
</h1>
<h1 class="otto">
  Slippery Slime
</h1>
<h1 class="relief">
  Mummy Mommy
</h1>
<h1 class="close">
  Graveyard Smash
</h1>
<h1 class="printers">
  Skeleton Crew
</h1>
<h1 class="glow">
  Smooth Zombie
</h1>
<h1 class="vamp">
  Vampire Diaries
</h1>
</body>
</html>

8. CSS text shadow effect

Made by Mark Carr. Source

CSS text shadow effect
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
body {
  background-color: #757575;
}

.header {
  color: white;
  font-family: impact;
  font-size: 10rem;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}
.header--shadow::before {
  color: #000;
  content: attr(data-text);
  margin-top: 0.875rem;
  opacity: 0.7;
  position: absolute;
  transform: perspective(200px) rotateX(40deg) scale(0.83);
  z-index: -1;
}
</style>
</head>
<body>
  <h1 class="header header--shadow" data-text="lorem">lorem</h1>
</body>
</html>

9. SCSS 3D text mixin

Made by Liam Egan. Source

SCSS 3D text mixin
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
@import url("https://fonts.googleapis.com/css?family=Kanit:900");
body {
  background: #e6bebe;
}

h1 {
  color: #FFF;
  font-family: "Kanit";
  font-size: 60px;
  line-height: 1em;
  margin: 0;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  text-shadow: 0 1px 0 #dba1a1, 0 2px 0 #d89999, 0 3px 0 #d59292, 0 4px 0 #d28a8a, 0 5px 0 #cf8383, 0 6px 0 #cd7c7c, 0 7px 0 #ca7474, 0 8px 0 #c76d6d, 0 0 5px rgba(230, 139, 139, 0.05), 0 -1px 3px rgba(230, 139, 139, 0.2), 0 9px 9px rgba(230, 139, 139, 0.3), 0 12px 12px rgba(230, 139, 139, 0.3), 0 15px 15px rgba(230, 139, 139, 0.3);
}
</style>
</head>
<body>
  <h1>I&nbsp;am&nbsp;a&nbsp;3D (not&nbsp;really, tho)&nbsp;heading</h1>
</body>
</html>

10. Simple Text Shadow Effect

Made by Maciej LeszczyΕ„ski. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Montserrat:800" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  color: #651727;
  background-color: currentColor;
}

h1 {
  font: 800 9rem Montserrat, sans-serif;
  letter-spacing: -0.07ex;
  -webkit-animation: anim 1.5s infinite alternate ease-in-out;
          animation: anim 1.5s infinite alternate ease-in-out;
}

@-webkit-keyframes anim {
  from {
    text-shadow: 0 0 10px transparent;
  }
  to {
    text-shadow: 0 28px 50px rgba(0, 0, 0, 0.8);
  }
}

@keyframes anim {
  from {
    text-shadow: 0 0 10px transparent;
  }
  to {
    text-shadow: 0 28px 50px rgba(0, 0, 0, 0.8);
  }
}
</style>
</head>
<body>
  <h1>shadow</h1>
</body>
</html>

11. Text-Shadow Animate

Made by Wyatt Nolen. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
body {
  height: 100hv;
  background: #EDEEE9;
  margin: 0;
}

@keyframes animateShadow {
  0% {
    text-shadow: 0px 0px #252526, -1px 1px #252526, -2px 2px #252526, -3px 3px #252526, -4px 4px #252526, -5px 5px #252526, -6px 6px #252526, -7px 7px #252526, -8px 8px #252526, -9px 9px #252526, -10px 10px #252526, -11px 11px #252526, -12px 12px #252526, -13px 13px #252526, -14px 14px #252526, -15px 15px #252526, -16px 16px #252526, -17px 17px #252526, -18px 18px #252526, -19px 19px #252526, -20px 20px #252526, -21px 21px #313134, -22px 22px #313134, -23px 23px #313134, -24px 24px #313134, -25px 25px #313134, -26px 26px #313134, -27px 27px #313134, -28px 28px #313134, -29px 29px #313134, -30px 30px #313134, -31px 31px #313134, -32px 32px #313134, -33px 33px #313134, -34px 34px #313134, -35px 35px #313134, -36px 36px #313134, -37px 37px #313134, -38px 38px #313134, -39px 39px #313134, -40px 40px #313134, -41px 41px #3e3e40, -42px 42px #3e3e40, -43px 43px #3e3e40, -44px 44px #3e3e40, -45px 45px #3e3e40, -46px 46px #3e3e40, -47px 47px #3e3e40, -48px 48px #3e3e40, -49px 49px #3e3e40, -50px 50px #3e3e40, -51px 51px #3e3e40, -52px 52px #3e3e40, -53px 53px #3e3e40, -54px 54px #3e3e40, -55px 55px #3e3e40, -56px 56px #3e3e40, -57px 57px #3e3e40, -58px 58px #3e3e40, -59px 59px #3e3e40, -60px 60px #3e3e40, -61px 61px #4a4a4d, -62px 62px #4a4a4d, -63px 63px #4a4a4d, -64px 64px #4a4a4d, -65px 65px #4a4a4d, -66px 66px #4a4a4d, -67px 67px #4a4a4d, -68px 68px #4a4a4d, -69px 69px #4a4a4d, -70px 70px #4a4a4d, -71px 71px #4a4a4d, -72px 72px #4a4a4d, -73px 73px #4a4a4d, -74px 74px #4a4a4d, -75px 75px #4a4a4d, -76px 76px #4a4a4d, -77px 77px #4a4a4d, -78px 78px #4a4a4d, -79px 79px #4a4a4d, -80px 80px #4a4a4d, -81px 81px #575759, -82px 82px #575759, -83px 83px #575759, -84px 84px #575759, -85px 85px #575759, -86px 86px #575759, -87px 87px #575759, -88px 88px #575759, -89px 89px #575759, -90px 90px #575759, -91px 91px #575759, -92px 92px #575759, -93px 93px #575759, -94px 94px #575759, -95px 95px #575759, -96px 96px #575759, -97px 97px #575759, -98px 98px #575759, -99px 99px #575759, -100px 100px #575759;
  }
  20% {
    text-shadow: 0px 0px #313134, -1px 1px #313134, -2px 2px #313134, -3px 3px #313134, -4px 4px #313134, -5px 5px #313134, -6px 6px #313134, -7px 7px #313134, -8px 8px #313134, -9px 9px #313134, -10px 10px #313134, -11px 11px #313134, -12px 12px #313134, -13px 13px #313134, -14px 14px #313134, -15px 15px #313134, -16px 16px #313134, -17px 17px #313134, -18px 18px #313134, -19px 19px #313134, -20px 20px #313134, -21px 21px #3e3e40, -22px 22px #3e3e40, -23px 23px #3e3e40, -24px 24px #3e3e40, -25px 25px #3e3e40, -26px 26px #3e3e40, -27px 27px #3e3e40, -28px 28px #3e3e40, -29px 29px #3e3e40, -30px 30px #3e3e40, -31px 31px #3e3e40, -32px 32px #3e3e40, -33px 33px #3e3e40, -34px 34px #3e3e40, -35px 35px #3e3e40, -36px 36px #3e3e40, -37px 37px #3e3e40, -38px 38px #3e3e40, -39px 39px #3e3e40, -40px 40px #3e3e40, -41px 41px #4a4a4d, -42px 42px #4a4a4d, -43px 43px #4a4a4d, -44px 44px #4a4a4d, -45px 45px #4a4a4d, -46px 46px #4a4a4d, -47px 47px #4a4a4d, -48px 48px #4a4a4d, -49px 49px #4a4a4d, -50px 50px #4a4a4d, -51px 51px #4a4a4d, -52px 52px #4a4a4d, -53px 53px #4a4a4d, -54px 54px #4a4a4d, -55px 55px #4a4a4d, -56px 56px #4a4a4d, -57px 57px #4a4a4d, -58px 58px #4a4a4d, -59px 59px #4a4a4d, -60px 60px #4a4a4d, -61px 61px #575759, -62px 62px #575759, -63px 63px #575759, -64px 64px #575759, -65px 65px #575759, -66px 66px #575759, -67px 67px #575759, -68px 68px #575759, -69px 69px #575759, -70px 70px #575759, -71px 71px #575759, -72px 72px #575759, -73px 73px #575759, -74px 74px #575759, -75px 75px #575759, -76px 76px #575759, -77px 77px #575759, -78px 78px #575759, -79px 79px #575759, -80px 80px #575759, -81px 81px #252526, -82px 82px #252526, -83px 83px #252526, -84px 84px #252526, -85px 85px #252526, -86px 86px #252526, -87px 87px #252526, -88px 88px #252526, -89px 89px #252526, -90px 90px #252526, -91px 91px #252526, -92px 92px #252526, -93px 93px #252526, -94px 94px #252526, -95px 95px #252526, -96px 96px #252526, -97px 97px #252526, -98px 98px #252526, -99px 99px #252526, -100px 100px #252526;
  }
  40% {
    text-shadow: 0px 0px #3e3e40, -1px 1px #3e3e40, -2px 2px #3e3e40, -3px 3px #3e3e40, -4px 4px #3e3e40, -5px 5px #3e3e40, -6px 6px #3e3e40, -7px 7px #3e3e40, -8px 8px #3e3e40, -9px 9px #3e3e40, -10px 10px #3e3e40, -11px 11px #3e3e40, -12px 12px #3e3e40, -13px 13px #3e3e40, -14px 14px #3e3e40, -15px 15px #3e3e40, -16px 16px #3e3e40, -17px 17px #3e3e40, -18px 18px #3e3e40, -19px 19px #3e3e40, -20px 20px #3e3e40, -21px 21px #4a4a4d, -22px 22px #4a4a4d, -23px 23px #4a4a4d, -24px 24px #4a4a4d, -25px 25px #4a4a4d, -26px 26px #4a4a4d, -27px 27px #4a4a4d, -28px 28px #4a4a4d, -29px 29px #4a4a4d, -30px 30px #4a4a4d, -31px 31px #4a4a4d, -32px 32px #4a4a4d, -33px 33px #4a4a4d, -34px 34px #4a4a4d, -35px 35px #4a4a4d, -36px 36px #4a4a4d, -37px 37px #4a4a4d, -38px 38px #4a4a4d, -39px 39px #4a4a4d, -40px 40px #4a4a4d, -41px 41px #575759, -42px 42px #575759, -43px 43px #575759, -44px 44px #575759, -45px 45px #575759, -46px 46px #575759, -47px 47px #575759, -48px 48px #575759, -49px 49px #575759, -50px 50px #575759, -51px 51px #575759, -52px 52px #575759, -53px 53px #575759, -54px 54px #575759, -55px 55px #575759, -56px 56px #575759, -57px 57px #575759, -58px 58px #575759, -59px 59px #575759, -60px 60px #575759, -61px 61px #252526, -62px 62px #252526, -63px 63px #252526, -64px 64px #252526, -65px 65px #252526, -66px 66px #252526, -67px 67px #252526, -68px 68px #252526, -69px 69px #252526, -70px 70px #252526, -71px 71px #252526, -72px 72px #252526, -73px 73px #252526, -74px 74px #252526, -75px 75px #252526, -76px 76px #252526, -77px 77px #252526, -78px 78px #252526, -79px 79px #252526, -80px 80px #252526, -81px 81px #313134, -82px 82px #313134, -83px 83px #313134, -84px 84px #313134, -85px 85px #313134, -86px 86px #313134, -87px 87px #313134, -88px 88px #313134, -89px 89px #313134, -90px 90px #313134, -91px 91px #313134, -92px 92px #313134, -93px 93px #313134, -94px 94px #313134, -95px 95px #313134, -96px 96px #313134, -97px 97px #313134, -98px 98px #313134, -99px 99px #313134, -100px 100px #313134;
  }
  60% {
    text-shadow: 0px 0px #4a4a4d, -1px 1px #4a4a4d, -2px 2px #4a4a4d, -3px 3px #4a4a4d, -4px 4px #4a4a4d, -5px 5px #4a4a4d, -6px 6px #4a4a4d, -7px 7px #4a4a4d, -8px 8px #4a4a4d, -9px 9px #4a4a4d, -10px 10px #4a4a4d, -11px 11px #4a4a4d, -12px 12px #4a4a4d, -13px 13px #4a4a4d, -14px 14px #4a4a4d, -15px 15px #4a4a4d, -16px 16px #4a4a4d, -17px 17px #4a4a4d, -18px 18px #4a4a4d, -19px 19px #4a4a4d, -20px 20px #4a4a4d, -21px 21px #575759, -22px 22px #575759, -23px 23px #575759, -24px 24px #575759, -25px 25px #575759, -26px 26px #575759, -27px 27px #575759, -28px 28px #575759, -29px 29px #575759, -30px 30px #575759, -31px 31px #575759, -32px 32px #575759, -33px 33px #575759, -34px 34px #575759, -35px 35px #575759, -36px 36px #575759, -37px 37px #575759, -38px 38px #575759, -39px 39px #575759, -40px 40px #575759, -41px 41px #252526, -42px 42px #252526, -43px 43px #252526, -44px 44px #252526, -45px 45px #252526, -46px 46px #252526, -47px 47px #252526, -48px 48px #252526, -49px 49px #252526, -50px 50px #252526, -51px 51px #252526, -52px 52px #252526, -53px 53px #252526, -54px 54px #252526, -55px 55px #252526, -56px 56px #252526, -57px 57px #252526, -58px 58px #252526, -59px 59px #252526, -60px 60px #252526, -61px 61px #313134, -62px 62px #313134, -63px 63px #313134, -64px 64px #313134, -65px 65px #313134, -66px 66px #313134, -67px 67px #313134, -68px 68px #313134, -69px 69px #313134, -70px 70px #313134, -71px 71px #313134, -72px 72px #313134, -73px 73px #313134, -74px 74px #313134, -75px 75px #313134, -76px 76px #313134, -77px 77px #313134, -78px 78px #313134, -79px 79px #313134, -80px 80px #313134, -81px 81px #3e3e40, -82px 82px #3e3e40, -83px 83px #3e3e40, -84px 84px #3e3e40, -85px 85px #3e3e40, -86px 86px #3e3e40, -87px 87px #3e3e40, -88px 88px #3e3e40, -89px 89px #3e3e40, -90px 90px #3e3e40, -91px 91px #3e3e40, -92px 92px #3e3e40, -93px 93px #3e3e40, -94px 94px #3e3e40, -95px 95px #3e3e40, -96px 96px #3e3e40, -97px 97px #3e3e40, -98px 98px #3e3e40, -99px 99px #3e3e40, -100px 100px #3e3e40;
  }
  80% {
    text-shadow: 0px 0px #575759, -1px 1px #575759, -2px 2px #575759, -3px 3px #575759, -4px 4px #575759, -5px 5px #575759, -6px 6px #575759, -7px 7px #575759, -8px 8px #575759, -9px 9px #575759, -10px 10px #575759, -11px 11px #575759, -12px 12px #575759, -13px 13px #575759, -14px 14px #575759, -15px 15px #575759, -16px 16px #575759, -17px 17px #575759, -18px 18px #575759, -19px 19px #575759, -20px 20px #575759, -21px 21px #252526, -22px 22px #252526, -23px 23px #252526, -24px 24px #252526, -25px 25px #252526, -26px 26px #252526, -27px 27px #252526, -28px 28px #252526, -29px 29px #252526, -30px 30px #252526, -31px 31px #252526, -32px 32px #252526, -33px 33px #252526, -34px 34px #252526, -35px 35px #252526, -36px 36px #252526, -37px 37px #252526, -38px 38px #252526, -39px 39px #252526, -40px 40px #252526, -41px 41px #313134, -42px 42px #313134, -43px 43px #313134, -44px 44px #313134, -45px 45px #313134, -46px 46px #313134, -47px 47px #313134, -48px 48px #313134, -49px 49px #313134, -50px 50px #313134, -51px 51px #313134, -52px 52px #313134, -53px 53px #313134, -54px 54px #313134, -55px 55px #313134, -56px 56px #313134, -57px 57px #313134, -58px 58px #313134, -59px 59px #313134, -60px 60px #313134, -61px 61px #3e3e40, -62px 62px #3e3e40, -63px 63px #3e3e40, -64px 64px #3e3e40, -65px 65px #3e3e40, -66px 66px #3e3e40, -67px 67px #3e3e40, -68px 68px #3e3e40, -69px 69px #3e3e40, -70px 70px #3e3e40, -71px 71px #3e3e40, -72px 72px #3e3e40, -73px 73px #3e3e40, -74px 74px #3e3e40, -75px 75px #3e3e40, -76px 76px #3e3e40, -77px 77px #3e3e40, -78px 78px #3e3e40, -79px 79px #3e3e40, -80px 80px #3e3e40, -81px 81px #4a4a4d, -82px 82px #4a4a4d, -83px 83px #4a4a4d, -84px 84px #4a4a4d, -85px 85px #4a4a4d, -86px 86px #4a4a4d, -87px 87px #4a4a4d, -88px 88px #4a4a4d, -89px 89px #4a4a4d, -90px 90px #4a4a4d, -91px 91px #4a4a4d, -92px 92px #4a4a4d, -93px 93px #4a4a4d, -94px 94px #4a4a4d, -95px 95px #4a4a4d, -96px 96px #4a4a4d, -97px 97px #4a4a4d, -98px 98px #4a4a4d, -99px 99px #4a4a4d, -100px 100px #4a4a4d;
  }
  100% {
    text-shadow: 0px 0px #252526, -1px 1px #252526, -2px 2px #252526, -3px 3px #252526, -4px 4px #252526, -5px 5px #252526, -6px 6px #252526, -7px 7px #252526, -8px 8px #252526, -9px 9px #252526, -10px 10px #252526, -11px 11px #252526, -12px 12px #252526, -13px 13px #252526, -14px 14px #252526, -15px 15px #252526, -16px 16px #252526, -17px 17px #252526, -18px 18px #252526, -19px 19px #252526, -20px 20px #252526, -21px 21px #313134, -22px 22px #313134, -23px 23px #313134, -24px 24px #313134, -25px 25px #313134, -26px 26px #313134, -27px 27px #313134, -28px 28px #313134, -29px 29px #313134, -30px 30px #313134, -31px 31px #313134, -32px 32px #313134, -33px 33px #313134, -34px 34px #313134, -35px 35px #313134, -36px 36px #313134, -37px 37px #313134, -38px 38px #313134, -39px 39px #313134, -40px 40px #313134, -41px 41px #3e3e40, -42px 42px #3e3e40, -43px 43px #3e3e40, -44px 44px #3e3e40, -45px 45px #3e3e40, -46px 46px #3e3e40, -47px 47px #3e3e40, -48px 48px #3e3e40, -49px 49px #3e3e40, -50px 50px #3e3e40, -51px 51px #3e3e40, -52px 52px #3e3e40, -53px 53px #3e3e40, -54px 54px #3e3e40, -55px 55px #3e3e40, -56px 56px #3e3e40, -57px 57px #3e3e40, -58px 58px #3e3e40, -59px 59px #3e3e40, -60px 60px #3e3e40, -61px 61px #4a4a4d, -62px 62px #4a4a4d, -63px 63px #4a4a4d, -64px 64px #4a4a4d, -65px 65px #4a4a4d, -66px 66px #4a4a4d, -67px 67px #4a4a4d, -68px 68px #4a4a4d, -69px 69px #4a4a4d, -70px 70px #4a4a4d, -71px 71px #4a4a4d, -72px 72px #4a4a4d, -73px 73px #4a4a4d, -74px 74px #4a4a4d, -75px 75px #4a4a4d, -76px 76px #4a4a4d, -77px 77px #4a4a4d, -78px 78px #4a4a4d, -79px 79px #4a4a4d, -80px 80px #4a4a4d, -81px 81px #575759, -82px 82px #575759, -83px 83px #575759, -84px 84px #575759, -85px 85px #575759, -86px 86px #575759, -87px 87px #575759, -88px 88px #575759, -89px 89px #575759, -90px 90px #575759, -91px 91px #575759, -92px 92px #575759, -93px 93px #575759, -94px 94px #575759, -95px 95px #575759, -96px 96px #575759, -97px 97px #575759, -98px 98px #575759, -99px 99px #575759, -100px 100px #575759;
  }
}
div {
  padding: 40px;
  overflow: hidden;
  margin: 0px auto;
  width: 50vw;
  font-weight: 600;
  line-height: 0.8;
  font-size: 60px;
  text-align: left;
  font-size: 3rem;
  color: #EDEEE9;
  font-family: "Georgia";
  text-shadow: 0px 0px #252526, -1px 1px #252526, -2px 2px #252526, -3px 3px #252526, -4px 4px #252526, -5px 5px #252526, -6px 6px #252526, -7px 7px #252526, -8px 8px #252526, -9px 9px #252526, -10px 10px #252526, -11px 11px #252526, -12px 12px #252526, -13px 13px #252526, -14px 14px #252526, -15px 15px #252526, -16px 16px #252526, -17px 17px #252526, -18px 18px #252526, -19px 19px #252526, -20px 20px #252526, -21px 21px #313134, -22px 22px #313134, -23px 23px #313134, -24px 24px #313134, -25px 25px #313134, -26px 26px #313134, -27px 27px #313134, -28px 28px #313134, -29px 29px #313134, -30px 30px #313134, -31px 31px #313134, -32px 32px #313134, -33px 33px #313134, -34px 34px #313134, -35px 35px #313134, -36px 36px #313134, -37px 37px #313134, -38px 38px #313134, -39px 39px #313134, -40px 40px #313134, -41px 41px #3e3e40, -42px 42px #3e3e40, -43px 43px #3e3e40, -44px 44px #3e3e40, -45px 45px #3e3e40, -46px 46px #3e3e40, -47px 47px #3e3e40, -48px 48px #3e3e40, -49px 49px #3e3e40, -50px 50px #3e3e40, -51px 51px #3e3e40, -52px 52px #3e3e40, -53px 53px #3e3e40, -54px 54px #3e3e40, -55px 55px #3e3e40, -56px 56px #3e3e40, -57px 57px #3e3e40, -58px 58px #3e3e40, -59px 59px #3e3e40, -60px 60px #3e3e40, -61px 61px #4a4a4d, -62px 62px #4a4a4d, -63px 63px #4a4a4d, -64px 64px #4a4a4d, -65px 65px #4a4a4d, -66px 66px #4a4a4d, -67px 67px #4a4a4d, -68px 68px #4a4a4d, -69px 69px #4a4a4d, -70px 70px #4a4a4d, -71px 71px #4a4a4d, -72px 72px #4a4a4d, -73px 73px #4a4a4d, -74px 74px #4a4a4d, -75px 75px #4a4a4d, -76px 76px #4a4a4d, -77px 77px #4a4a4d, -78px 78px #4a4a4d, -79px 79px #4a4a4d, -80px 80px #4a4a4d, -81px 81px #575759, -82px 82px #575759, -83px 83px #575759, -84px 84px #575759, -85px 85px #575759, -86px 86px #575759, -87px 87px #575759, -88px 88px #575759, -89px 89px #575759, -90px 90px #575759, -91px 91px #575759, -92px 92px #575759, -93px 93px #575759, -94px 94px #575759, -95px 95px #575759, -96px 96px #575759, -97px 97px #575759, -98px 98px #575759, -99px 99px #575759, -100px 100px #575759;
  animation-name: animateShadow;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
</style>
</head>
<body>
  <main class="site__main">
          <div>
            <h1>
              A lion <br />
              does not <br />
              ask permission <br />
              before he <br />
              eats a zebra <br />
            </h1>
          </div>
        </main>
</body>
</html>