This example demonstrates how CSS can be used to create a flickering text effect, similar to the glow of an old neon sign or a digital display struggling to stay lit.
By combining @keyframes animations with text shadows, the text appears to shimmer, pulse, or waver between two different shadow states.
The result is a playful, eye-catching effect that can be used in banners, headers, or creative web projects where you want to grab a viewer's attention.
You can easily adjust the speed, color, shadow intensity, and letter spacing to experiment with different glowing or glitchy appearances. The flickering is controlled entirely with CSS, meaning it requires no JavaScript and works smoothly across modern browsers.
<style>
@keyframes textflicker {
from {
text-shadow: 1px 0 0 #C1C1C1, -2px 0 0 #000000;
}
to {
text-shadow: 2px 0.5px 2px #C1C1C1, -1px -0.5px 2px #000000;
}
}
.flicker-text {
padding: 1em;
color: #ccc;
font-size: 1em;
line-height: 1;
text-shadow: 0.06rem 0 0.06rem #2c2c2c, -0.125rem 0 0.06rem #2c2c2c;
letter-spacing: 0.125em;
animation: textflicker 0.5s infinite alternate;
}
</style>
<p class="flicker-text">This is a Flicker Text</p>