Blink Tag in HTML: Copy-Paste CSS Code for Blinking Text

The <blink> tag was never part of the HTML standard and is now obsolete. Modern browsers ignore it, so text inside it does not blink. To make text blink today, use the CSS below.

How to Make Text Blink with CSS

<style>
  .blink {
    animation: blink 1s step-end 4;
  }

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

  @media (prefers-reduced-motion: reduce) {
    .blink {
      animation: none;
    }
  }
</style>

<p class="blink">This text blinks.</p>

• step-end switches the text fully on and off, like the old tag did. Use linear instead for a fade.
• Keep the duration at 0.5s or slower. Blinking faster than about three flashes per second can fail Web Content Accessibility Guidelines (WCAG) 2.3.1.
• 4 is the number of blinks. Keep duration × count at 5 seconds or less, or use infinite only together with a way to pause or stop it (WCAG 2.2.2).
• The media query turns the blinking off for users who have asked their system for reduced motion.

How to Use the Blink Tag in HTML

Originally, the syntax for the blink tag in HTML was simple. You wrapped your desired text in the <blink> and </blink> tags like this:

<blink>This text will blink.</blink>

The browser would render the enclosed text in a blinking animation. However, only a few early browsers—like Netscape Navigator—ever supported it. As standards evolved and accessibility concerns grew, support for HTML blink tags disappeared.

If you type this into a modern browser today, the text won’t blink. It will render like normal static text because most modern engines simply ignore the <blink> tag.

When to Use the Blink Tag in HTML (And Why You Shouldn't)

There are very few—if any—practical reasons to use the blink tag today. Here’s why:

• Lack of support: It doesn’t work in any modern browser.
• Accessibility issues: Flashing or blinking elements can cause problems for users with epilepsy or other visual disorders.
• Poor user experience: Blinking text distracts rather than informs. It often feels like an outdated web gimmick.

That said, you might encounter the blink tag HTML in one of the following situations:

Preserving Legacy Code

Some old web pages still use HTML blink tags. If you’re maintaining or converting those pages, knowing what the tag did can help you replace it with a modern equivalent.

Learning and Experimentation

If you're learning HTML and want to explore deprecated tags, experimenting with <blink> offers insight into how HTML evolved over the decades.

Simulating Blink Behavior

While you shouldn’t use the blink tag anymore, you can recreate the blinking effect with CSS or JavaScript for a more standards-compliant approach (and with caution).

Examples of the Blink Tag in Action (Then and Now)

Deprecated HTML Blink Tag Example

<blink>This used to blink!</blink>

As mentioned, this tag won't have any effect in current browsers. Instead, use the CSS at the top of this page.

JavaScript-Based Blinking Text

You can also use JavaScript to toggle text visibility repeatedly:

<p id="jsBlink">This text will blink with JS.</p>

<script>
  const el = document.getElementById("jsBlink");
  const blinkId = setInterval(() => {
    el.style.visibility = el.style.visibility === "hidden" ? "visible" : "hidden";
  }, 500);

  setTimeout(() => {
    clearInterval(blinkId);
    el.style.visibility = "visible";
  }, 4000);
</script>

This technique gives you more control over the blinking speed and behavior. Here, setTimeout() stops the blinking after 4 seconds and leaves the text visible.

Learn More About HTML Blink Tags

The History of HTML Blink Tags

The <blink> tag was first introduced in early Netscape browsers during the 1990s. Its purpose was to draw attention to text, often in a jarring and animated way. It was never included in any official HTML specification and remained a proprietary feature. Over time, developers started to recognize the issues associated with blinking content, and browsers gradually dropped support. Google pays tribute to the tag with an Easter egg: searching "blink html" makes the words "blink" and "html" in the results blink.

Eventually, standards bodies like the W3C discouraged the use of any HTML tag for blinking text. In fact, the W3C’s recommendation has always been to use CSS or JavaScript for any dynamic or animated content.

Accessibility and Usability Concerns

Blinking text poses several risks and issues:

• Accessibility: Flashing content can cause seizures in people with photosensitive epilepsy.
• Distraction: Users may find blinking elements annoying or difficult to read.
• Mobile issues: On smaller screens, rapidly blinking text becomes harder to process and more visually disruptive.

Because of these concerns, WCAG sets two limits. Under 2.3.1 Three Flashes or Below Threshold, nothing on a page should flash more than three times in any one-second period unless the flashes stay below the general and red flash thresholds. Under 2.2.2 Pause, Stop, Hide, blinking content that starts automatically, lasts more than 5 seconds, and is shown alongside other content needs a control to pause, stop, or hide it, unless the blinking is essential to the activity.

HTML Tag for Blinking Text Today

There is no official HTML tag for blinking text in modern standards. If you want to highlight content or draw attention, you should consider safer and more user-friendly alternatives:

• Use bold or italic styles: Emphasize important words without animation.
• Use contrasting colors or background colors: Draw attention visually without motion.
• Use animation with clear purpose and control: If animation is truly needed, provide a way for users to pause or disable it.

Simulating Legacy Look Without Functional Blink

If you're building a retro-themed website and want to include blinking text as part of the aesthetic—but don’t need it to actually blink—you could style it to appear retro without animation:

<span style="color: red; font-family: 'Courier New', monospace; text-decoration: underline dotted;">
  [BLINKING TEXT]
</span>

This provides the feel of blinking text in HTML without creating movement.

Best Practices for Highlighting Text in Modern HTML

Instead of using outdated tags like <blink>, modern developers follow these techniques:

Emphasizing Text with Semantic Tags

<strong>Important message:</strong> Please read before continuing.

This uses semantic HTML and improves accessibility for screen readers.

Highlighting with Background Color

<span style="background-color: yellow;">Highlight this sentence.</span>

This stands out without animation or motion.

Animating with CSS Transitions

You can animate font color or background color instead of blinking:

<style>
  .pulse {
    animation: pulse 1.5s infinite;
  }

  @keyframes pulse {
    0% {
      color: black;
    }
    50% {
      color: red;
    }
    100% {
      color: black;
    }
  }
</style>

<p class="pulse">This text pulses instead of blinking.</p>

This is smoother, less jarring, and more visually refined.

Using the blink tag in HTML is no longer a practical or recommended technique, but knowing about it can help you understand web development’s history and how styling techniques have improved. You can now achieve more accessible, responsive, and flexible designs using modern CSS and JavaScript.

So, while <blink> had its moment, it’s better left in the past. Whether you’re maintaining old code, experimenting with retro designs, or trying to simulate old-school web behavior, you now know how the blink tag HTML worked, why it faded out, and what to use instead.