<section>
  <h1>1.Text shadowなし</h1>
  <div class="box">
    <p>test</p>
  </div>

  <h1>2.Text shadowあり</h1>
  <div class="box">
    <p class="shadow">test</p>
  </div>

  <h1>3.Text shadow 2色</h1>
  <div class="box">
    <p class="shadow-double">test</p>
  </div>

  <h1>4.Text shadow hover</h1>
  <div class="box">
    <p class="shadow-hover">test</p>
  </div>

  <h1>5.Text shadow ネオン管風アニメーション</h1>
  <div class="box">
    <p class="shadow-glitch">test</p>
  </div>
</section>
@keyframes shadowAnimate {
  from{
   text-shadow: 2px 2px 2px blue, -2px 0px 1px red;
  }
  to{
    text-shadow: 3px 3px 2px blue , -3px -1px 1px red;
  }
}

section{
  text-align: center;
}

.box{
  margin:0 auto;
  background-color:green;
  width:350px;
  text-align: center;
  padding: 1rem;
}
p{
  font-size:3rem;
}
p.shadow{
  text-shadow:1px 1px 2px white;
}

p.shadow-double{
  text-shadow:5px 5px 2px red, -5px -5px 2px blue;
}

p.shadow-hover{
  transition:.5s;
  &:hover{
    text-shadow: 100px 0px 0px blue , -100px -0px 0px red;
  }
}
p.shadow-glitch{
  animation-name:shadowAnimate;
  animation-duration: .00001s;
  animation-direction: alternate;
  animation-iteration-count:infinite;
  mix-blend-mode: color;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.