The problem
You need to create a vibrant neon sign effect for headings or special text elements in your design.
The solution
.neon-text {
color: #fff;
text-shadow:
0 0 5px #fff,
0 0 10px #fff,
0 0 20px #3a7bff,
0 0 40px #3a7bff,
0 0 80px #3a7bff;
animation: neon-flicker 1.5s infinite alternate;
}
@keyframes neon-flicker {
0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
text-shadow:
0 0 5px #fff,
0 0 10px #fff,
0 0 20px #3a7bff,
0 0 40px #3a7bff,
0 0 80px #3a7bff;
}
20%, 24%, 55% {
text-shadow: none;
}
}See it live
Put it to work
<h1 class="neon-text">NEON DREAMS</h1>Worth knowing
Change the color values (#3a7bff) to match your desired neon color. The flicker animation adds realism.