Skip to content
Nate
Stephens

Neon Text Effect

This is an example of a basic neon text effect with pulsing.

I think this requires a dark background to really work. Also, the font I'm using doesn't really do it justice. Overall this probably isn't the best example...worth checking out CodePen for better ones.

Neon Text

<p>Neon Text</p>
p {
  color: #fff;
  animation: neonize 1s ease-in-out infinite alternate;
}

@keyframes neonize {
  from {
    text-shadow:
    0 0 4px #fff,
    0 0 10px #fff,
    0 0 30px #ff319b,
    0 0 50px #ff319b,
    0 0 70px #ff319b,
    0 0 90px #ff319b;
  }
  to {
    text-shadow:
    0 0 2px #fff,
    0 0 5px #fff,
    0 0 15px #ff319b,
    0 0 25px #ff319b,
    0 0 35px #ff319b,
    0 0 45px #ff319b;
  }
}

Last Updated: