Blink HTML Tag: How to Make Text Blink in HTML

What is the Blink HTML Tag?

The blink HTML tag was an HTML element that let you flash text on a screen. Simply wrapping some text with the blink HTML tag would quite simply make text blink on your webpage. However, as you might discover, it’s deprecated, obsolete, and you just simply can’t use it anymore. It has pretty much no support in any modern browser.

Support my original content published here, your support means alot: Blink HTML Tag

So you might be thinking you’re out of luck, right? Well, luckily, we can replicate it with some simple CSS.

Here is the working examples for Blink HTML Tag:

How to Make Text Blink in HTML Using CSS

Let’s start with a simple example where we want to make text blink. Instead of using the deprecated blink tag, we’re going to use a <span> with a class of "blink":

<span class="blink">Blink 182</span>

Creating the Blink Animation

Next, we’re going to create some keyframes to actually create our animation:

@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

When something blinks, it basically shows itself and then hides itself, shows itself and hides itself. We start at 0% with an opacity of 1, then set 50% at opacity 0, and then go back to 100% where we set the opacity at 1 again.

Now that we have those keyframes, we can actually create a class for our blink span tag:

.blink {
  animation: blink 1s infinite;
}

We’re going to say blink for one second and infinite so it just continues forever.

Making It Actually Blink (Not Fade)

Now you’ll notice it’s animating, but it’s not necessarily blinking, it’s just kind of fading in and out. We want it to actually blink, just like the blank tag used to. To fix this, we add the steps function:

.blink {
  animation: blink 1s steps(1, end) infinite;
}

We’re going to set it for one step and position it at the end, and now our blink is actually blinking.

Creative Alternatives to the Blink HTML Tag

It’s 2025, we can probably do something a little bit fancier than just a blinking tag, right?

Smooth Fade Effect

Actually, if we remove those steps, the fade out is a little bit nicer of a touch and feels more modern than having just a simple blink tag.

Sci-Fi Fade to Blue

What if we wanted to try one of those cool sci-fi effects where it fades out to blue?

@keyframes blink {
  0% { opacity: 1; }
  100% { opacity: 0; color: blue; }
}

.blink {
  animation: blink 3s infinite;
}

Now when it fades out, it fades out to blue, which gives that cool retro-y sci-fi look. Changing it to three seconds slows it down and kind of just enhances that fade out effect.

Growing and Shrinking Effect

Something else that might be cool is making it grow out to fade out and then come back in with a fade:

@keyframes blink {
  0% { opacity: 1; transform: scale(1); }
  50% { opacity: 0; transform: scale(2); }
  51% { opacity: 0; transform: scale(0); }
  100% { opacity: 1; transform: scale(1); }
}

This effect makes it grow out and fade out, but then still come back in. It gives this nice kind of three-dimensional effect where it’s coming back at you, but then coming from behind it.

Final Thoughts on Blink HTML Tag

While it might be a bummer that we don’t have our handy blink tag anymore, we can easily replicate this with some simple CSS animations. The cool thing is we can take these animations and apply them to really anything we want, whether it’s trying to replicate the marquee effect (which is similarly deprecated) or creating really cool pulsating effects.

CSS animations can be really powerful and flexible for whatever you want to try to create. Now you should be able to replicate your favorite blink tag effect in any of your projects using modern, supported CSS techniques.

Did you learn something good today as a developer?
Then show some love.
© Muhammad Usman
WordPress Developer | Website Strategist | SEO Specialist
Don’t forget to subscribe to Developer’s Journey to show your support.
Bookmark this for your next project.