5+ JavaScript Text Shadow Effect Examples

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

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

Related Posts

JavaScript Text Shadow Effect Examples

1. JS Text Shadow

Made by Harlee Tholen. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
html {
    color: black;
    font-family: sans-serif;
    background-color: black; 
  }
  body {
    margin: 0;
  }
  .hero {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
  }
  h1 {
    text-shadow: 10px 10px 0 rgba(0,0,0,1);
    font-size: 100px;
  }
</style>
</head>
<body>
  <div class="hero">
    <h1 contenteditable>๐ŸŒฎTacos!</h1>
  </div>
      <script>
const hero = document.querySelector('.hero');
const text = hero.querySelector('h1');
const walk = 100;

function shadow(e) {
  const { offsetWidth: width, offsetHeight: height } = hero;
  let { offsetX: x, offsetY: y } = e;

  if (this !== e.target) {
    x = x + e.target.offsetLeft;
    y = y + e.target.offsetTop;
  }
  const xWalk = Math.round(x / width * walk - walk / 2);
  const yWalk = Math.round(y / height * walk - walk / 2);

  text.style.textShadow = `${xWalk}px ${yWalk}px 0 red,
                             ${xWalk * -1}px ${yWalk * -1}px 0 blue  `;

}

hero.addEventListener('mousemove', shadow);
    </script>
</body>
</html>

2. Simple Text Shadow

Made by Patrick Griffiths. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title> 
<style>
/* POSITIONING CONTENT */
body {
  background: #bbb;
}
.row {
  width: 98%;
  margin: 0px auto;
}

/* ACTUAL CSS FOR THE ELEMENTS PRESENTED */
.box {
  background: #E64848;
  height: 200px;
  width: 100%;
}
.js-shadow {
  color: #fff;
  font-size: 10em;
  text-align: center;
  display: block;
  overflow: hidden;
  height: 100%;
  width: 100%;
}
</style>
</head>
<body>
  <!-- Positioning -->
<div class="row">
    <!-- The box for the text & shadow -->
    <div class="box">
      <!-- Try changing the word... -->
      <p class="js-shadow">Testing</p>
    </div>
</div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
      <script>
var makeShadow = function (num, color) {
  var value = '';
  for (var i = 1; i < num; i++) {if (window.CP.shouldStopExecution(0)) break;
    value += i + 'px ' + i + 'px 0px' + color;
    if (i != num - 1) {
      value += ', ';
    }
  }window.CP.exitedLoop(0);
  return value;
};
document.querySelector('.js-shadow').style.textShadow = makeShadow(200, '#B83A3A');
    </script>
</body>
</html>

3. Neon text-shadow effects

Made by Eric Jung. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link href='https://fonts.googleapis.com/css?family=League+Script' rel='stylesheet' type='text/css'> 
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Bad+Script|Gruppo|Kumar+One+Outline|League+Script|Londrina+Outline|Monoton|Sriracha|Yellowtail&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789?+'>
  
<style>
html,
body {
  min-height: 100vh;
  margin: 0;
}

html {
  background: #090000;
  font-size: calc(1em + 3vmax);
  line-height: 1.1;
  text-align: center;
}

body {
  display: grid;
  grid-gap: 1em;
  grid-template-columns: repeat(auto-fit, minmax(0, 12ch));
  align-items: center;
  align-content: center;
  justify-content: center;
}

x-sign {
  --interval: 1s;
  display: block;
  text-shadow: 
    0 0 10px var(--color1),
    0 0 20px var(--color2),
    0 0 40px var(--color3),
    0 0 80px var(--color4);
  will-change: filter, color;
  filter: saturate(60%);
  animation: flicker steps(100) var(--interval) 1s infinite;
}

x-sign:nth-of-type(1) {
  color: yellow;
  --color1: goldenrod;
  --color2: orangered;
  --color3: mediumblue;
  --color4: purple;
  font-family: Gruppo;
}

x-sign:nth-of-type(2) {
  color: lightpink;
  --color1: pink;
  --color2: orangered;
  --color3: red;
  --color4: magenta;
  font-family: Bad Script;
}

x-sign:nth-of-type(3) {
  color: lightyellow;
  --color1: yellow;
  --color2: lime;
  --color3: green;
  --color4: mediumblue;
  font-family: Kumar One Outline;
}

x-sign:nth-of-type(4) {
  color: lightyellow;
  --color1: gold;
  --color2: firebrick;
  --color3: pink;
  --color4: red;
  font-family: Londrina Outline;
}


x-sign:nth-of-type(5) {
  color: azure;
  --color1: azure;
  --color2: aqua;
  --color3: dodgerblue;
  --color4: blue;
  font-family: Sriracha;
}

x-sign:nth-of-type(6) {
  color: tomato;
  --color1: orangered;
  --color2: firebrick;
  --color3: maroon;
  --color4: darkred;
  font-family: Yellowtail;
}

x-sign:nth-of-type(7) {
  color: lightyellow;
  --color1: yellow;
  --color2: orange;
  --color3: brown;
  --color4: purple;
  font-family: Bad Script;
}

x-sign:nth-of-type(8) {
  color: yellow;
  --color1: yellow;
  --color2: lime;
  --color3: green;
  --color4: darkgreen;
  font-family: Monoton;
}

x-sign:nth-of-type(9) {
  color: lightyellow;
  --color1: yellow;
  --color2: gold;
  --color3: orange;
  --color4: darkred;
  font-family: Sriracha;
}

@keyframes flicker {
  50% {
    color: white;
    filter: saturate(200%) hue-rotate(20deg);
  }
}
</style>
</head>
<body>
  <x-sign>
  OPEN
</x-sign>
<x-sign>
  Come back soon
</x-sign>
<x-sign>
  PBR<br>in cans
</x-sign>
<x-sign>
  REAL LIVE<br>Hot wings
</x-sign>
<x-sign>
  <small>GARDEN PARK</small><br>MOTEL
</x-sign>
<x-sign>
   Restrooms
  <br><small>Yes&mdash;they are bad</small>
</x-sign>
<x-sign>
  FREE RADIOS
</x-sign>
<x-sign>
   WHO YOU GONNA CALL?
</x-sign>
<x-sign>
  Karaoke Inside
</x-sign>
      <script>
const signs = document.querySelectorAll('x-sign');
const randomIn = (min, max) =>
Math.floor(Math.random() * (max - min + 1) + min);


const mixupInterval = el => {
  const ms = randomIn(2000, 4000);
  el.style.setProperty('--interval', `${ms}ms`);
};

signs.forEach(el => {
  mixupInterval(el);
  el.addEventListener('webkitAnimationIteration', () => {
    mixupInterval(el);
  });
});
    </script>
</body>
</html>
 

4. Text shadows Click & drag

Made by Danny Joris. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
@import url(https://fonts.googleapis.com/css?family=Pacifico);

html * {
  box-sizing: border-box;
}

:root {
  --1: #ff2400;
  --2: #e81d1d;
  --3: #e8b71d;
  --4: #e3e81d;
  --5: #1de840;
  --6: #1ddde8;
  --7: #2b1de8;
  --8: #dd00f3;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Pacifico', sans-serif;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  border: 10px solid white;
  padding-bottom: 2em;
  background: #333;
}

.rainbow {
  --x: 0.025em;
  --x1: calc(var(--x) * 1);
  --x2: calc(var(--x) * 2);
  --x3: calc(var(--x) * 3);
  --x4: calc(var(--x) * 4);
  --x5: calc(var(--x) * 5);
  --x6: calc(var(--x) * 6);
  --x7: calc(var(--x) * 7);
  --x8: calc(var(--x) * 8);
  --y: 0.025em;
  --y1: calc(var(--y) * 1);
  --y2: calc(var(--y) * 2);
  --y3: calc(var(--y) * 3);
  --y4: calc(var(--y) * 4);
  --y5: calc(var(--y) * 5);
  --y6: calc(var(--y) * 6);
  --y7: calc(var(--y) * 7);
  --y8: calc(var(--y) * 8);
  padding: 1em;
  text-align: center;
  font-size: 4em;
  line-height: 1.15;
  color: white;
  cursor: -webkit-grab;
  cursor: -moz-grab;
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
  animation: rainbow 0.75s infinite;
}

@media (min-width: 850px) {
  .rainbow {
    font-size: 6em;
  }
}

@media (min-width: 1400px) {
  .rainbow {
    font-size: 10em;
  }
}

@keyframes rainbow {
  0%, 100% {
    text-shadow:
      var(--x1) var(--y1) 0 var(--1),
      var(--x2) var(--y2) 0 var(--2),
      var(--x3) var(--y3) 0 var(--3),
      var(--x4) var(--y4) 0 var(--4),
      var(--x5) var(--y5) 0 var(--5),
      var(--x6) var(--y6) 0 var(--6),
      var(--x7) var(--y7) 0 var(--7),
      var(--x8) var(--y8) 0 var(--8);
  }
  12.5% {
    text-shadow:
      var(--x1) var(--y1) 0 var(--8),
      var(--x2) var(--y2) 0 var(--1),
      var(--x3) var(--y3) 0 var(--2),
      var(--x4) var(--y4) 0 var(--3),
      var(--x5) var(--y5) 0 var(--4),
      var(--x6) var(--y6) 0 var(--5),
      var(--x7) var(--y7) 0 var(--6),
      var(--x8) var(--y8) 0 var(--7);
  }
  25% {
    text-shadow:
      var(--x1) var(--y1) 0 var(--7),
      var(--x2) var(--y2) 0 var(--8),
      var(--x3) var(--y3) 0 var(--1),
      var(--x4) var(--y4) 0 var(--2),
      var(--x5) var(--y5) 0 var(--3),
      var(--x6) var(--y6) 0 var(--4),
      var(--x7) var(--y7) 0 var(--5),
      var(--x8) var(--y8) 0 var(--6);
  }
  37.5% {
    text-shadow:
      var(--x1) var(--y1) 0 var(--6),
      var(--x2) var(--y2) 0 var(--7),
      var(--x3) var(--y3) 0 var(--8),
      var(--x4) var(--y4) 0 var(--1),
      var(--x5) var(--y5) 0 var(--2),
      var(--x6) var(--y6) 0 var(--3),
      var(--x7) var(--y7) 0 var(--4),
      var(--x8) var(--y8) 0 var(--5);
  }
  50% {
    text-shadow:
      var(--x1) var(--y1) 0 var(--5),
      var(--x2) var(--y2) 0 var(--6),
      var(--x3) var(--y3) 0 var(--7),
      var(--x4) var(--y4) 0 var(--8),
      var(--x5) var(--y5) 0 var(--1),
      var(--x6) var(--y6) 0 var(--2),
      var(--x7) var(--y7) 0 var(--3),
      var(--x8) var(--y8) 0 var(--4);
  }
  62.5% {
    text-shadow:
      var(--x1) var(--y1) 0 var(--4),
      var(--x2) var(--y2) 0 var(--5),
      var(--x3) var(--y3) 0 var(--6),
      var(--x4) var(--y4) 0 var(--7),
      var(--x5) var(--y5) 0 var(--8),
      var(--x6) var(--y6) 0 var(--1),
      var(--x7) var(--y7) 0 var(--2),
      var(--x8) var(--y8) 0 var(--3);
  }
  75% {
    text-shadow:
      var(--x1) var(--y1) 0 var(--3),
      var(--x2) var(--y2) 0 var(--4),
      var(--x3) var(--y3) 0 var(--5),
      var(--x4) var(--y4) 0 var(--6),
      var(--x5) var(--y5) 0 var(--7),
      var(--x6) var(--y6) 0 var(--8),
      var(--x7) var(--y7) 0 var(--1),
      var(--x8) var(--y8) 0 var(--2);
  }
  87.5% {
    text-shadow:
      var(--x1) var(--y1) 0 var(--2),
      var(--x2) var(--y2) 0 var(--3),
      var(--x3) var(--y3) 0 var(--4),
      var(--x4) var(--y4) 0 var(--5),
      var(--x5) var(--y5) 0 var(--6),
      var(--x6) var(--y6) 0 var(--7),
      var(--x7) var(--y7) 0 var(--8),
      var(--x8) var(--y8) 0 var(--1);
  }
}

.rainbow.js-hover {
  cursor: grab;
}

.rainbow.js-mousedown {
  --1: #0000e5;
  --2: #1919ff;
  --3: #3232ff;
  --4: #4c4cff;
  --5: #6666ff;
  --6: #7f7fff;
  --7: #9999ff;
  --8: #b2b2ff;
  animation: rainbow 1s infinite ease;
  cursor: -webkit-grabbing;
  cursor:-moz-grabbing;
}
</style>
</head>
<body>
  <div class="container">
  <div class="rainbow">Click & drag</div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
      <script>
var x = null;
var y = null;
var max = 0.09;
var min = -max;
$('.rainbow').on('mousemove touchmove', function (e) {
  if (!$(this).hasClass('js-mousedown')) {
    return;
  }
  var pageX = e.pageX;
  var pageY = e.pageY;
  if (x === null) {
    x = pageX;
  }
  if (y === null) {
    y = pageY;
  }
  var styles = window.getComputedStyle(this);
  var xvar = parseFloat(styles.getPropertyValue('--x').trim('em'));
  var yvar = parseFloat(styles.getPropertyValue('--y').trim('em'));

  newxvar = (pageX - x) / 1000 + xvar;
  newyvar = (pageY - y) / 1000 + yvar;

  if (newxvar > max) {
    newxvar = max;
  }
  if (newxvar < min) {
    newxvar = min;
  }
  if (newyvar > max) {
    newyvar = max;
  }
  if (newyvar < min) {
    newyvar = min;
  }

  $(this).css({ '--x': newxvar + 'em', '--y': newyvar + 'em' });

  x = pageX;
  y = pageY;
}).on('mouseover', function () {
  $(this).addClass('js-hover');
}).on('mouseout', function () {
  $(this).removeClass('js-hover');
}).on('mousedown touchstart', function () {
  $(this).addClass('js-mousedown');
});
$(document).on('mouseup touchend', function () {
  x = null;
  y = null;
  $('.rainbow').removeClass('js-mousedown');
});
    </script>
</body>
</html>

5. Text Shadow

Made by yuanchuan. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
html, body { 
  height: 100%; 
  margin: 0;
}
body { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  background: #f1f1f1; 
}
</style>
</head>
<body>
  <!-- https://css-doodle.com -->

<css-doodle>
  :doodle {
    @grid: 8 / 70vmin;
    background: #fff;
    overflow: hidden;
    border: 2vmin solid #fff;
    box-shadow: 
      0 .5vmin 1vmin rgba(125, 125, 125, .2),
      0 2vmin 1vmin -1vmin rgba(125, 125, 125, .2);
  }
  :after, :before {
    --s: .1vmin;
    --c: @p(
      (53, 35, 75), (92, 59, 111),
      (216, 76, 115), (255, 132, 132)
    );
 
    content: \@hex(@r(0x30A0, 0x30CF));
    position: absolute;
    font-size: @r(5vmin, 30vmin); 
    color: rgb(var(--c));
    font-weight: bold;
    text-stroke: var(--s) #fff;
    transform:
      rotate(@r(360deg))
      translate(@r(-50%, 50%), @r(-50%, 50%));
  
    text-shadow:
      @m(10, (
        calc(@n() * var(--s)) 
        calc(@n() * var(--s)) 
        0 @pn(currentColor, #fff)
      )),
      @m(10, (
        calc((@n() + 10) * var(--s)) 
        calc((@n() + 10) * var(--s)) 
        0 @pn(rgba(var(--c), .1), #fff)
      )); 
  }
</css-doodle>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.5.1/css-doodle.min.js'></script>
      <script id="rendered-js" >
document.addEventListener('click', function (e) {
  e.target.update && e.target.update();
});
    </script>
</body>
</html>

6. Mega Shadow Text

Made by Bennett Feely. Source

<!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">
<style>
@import url(https://fonts.googleapis.com/css?family=Oswald:700);
html, body { margin:0; overflow:hidden; min-height:100%; }

html { position:relative; padding:20px 0 0; }
body { position:absolute; height:100%; width:100%; text-align:center; background:hsl(201,3%,50%); }


h1 { 
  font:65px "Oswald";
  text-transform:uppercase;
  perspective:100;
}

strong {
  display:block;
  position:absolute;
  width:100%;
  text-align:center;
  line-height:58px;
  color:hsl(201,3%,18%);
}

strong:first-child { 
  transform:rotateX(-110deg);
  transform-origin:center bottom;
  color:transparent;
  user-select:none;
  text-shadow:
    0 0 1px hsla(201,3%,30%,.6),
    0 -7px 10px hsla(201,3%,30%,.3);
}
</style>
</head>
<body>
  <h1 id="perspective">
  <strong id="shadow">Mega Shadow Text</strong>
  <strong>Mega Shadow Text</strong>
</h1>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script id="rendered-js" >
$("html").mousemove(function (e) {

  var deg = e.pageY / 10 + 240;
  var rotation = 'rotateX(' + deg + 'deg)';
  var rotate = {
    '-webkit-transform': rotation,
    '-moz-perspective': rotation,
    '-ms-perspective': rotation,
    'perspective': rotation };

  $("#shadow").css(rotate);


  var perspective = e.pageX / 2 + 25;
  var perspective = {
    '-webkit-perspective': perspective,
    '-moz-perspective': perspective,
    '-ms-perspective': perspective,
    'perspective': perspective };

  $("#perspective").css(perspective);

});
    </script>
</body>
</html>