<link href='https://fonts.googleapis.com/css?family=Vibur:400' rel='stylesheet' type='text/css'>
<div class="neon">text shadow<br>NEON EFFECT<br></div>
$color_white: #fff7fb;
$color_black: #010000;
$color_red: #f08;
body {
  background-color: $color_black;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.neon {
  font-size: 50px;
  line-height: 1.2;
  text-align: center;
  color: $color_white;
  font-family: "Vibur", sans-serif;
  animation: neon 1s infinite alternate;
  @keyframes neon {
    0% {
      text-shadow: 0 0 0.02em $color_white, 0 0 0.04em $color_white,
        0 0 0.06em $color_white, 0 0 0.1em $color_red, 0 0 0.4em $color_red,
        0 0 0.5em $color_red, 0 0 0.7em $color_red, 0 0 0.8em $color_red;
    }
    100% {
      text-shadow: 0 0 0.04em $color_white, 0 0 0.08em $color_white,
        0 0 0.1em $color_white, 0 0 0.3em $color_red, 0 0 0.5em $color_red,
        0 0 0.6em $color_red, 0 0 0.8em $color_red, 0 0 1em $color_red;
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.