HTML Blink Text generator

How to use

1. Type the text you want to make blink.
2. Pick a color, drag the speed slider, and adjust the font size.
3. Watch the live preview — that's the exact animation visitors will see.
4. Toggle "Reduced motion" to preview the static-highlight fallback.
5. Copy the HTML (paste anywhere) or the CSS class (add to your stylesheet).

Why the <blink> tag no longer works

The <blink> element was a non-standard tag from the early 1990s, supported only in Netscape Navigator. It never made it into any HTML specification, and every modern browser has intentionally removed it. If you write <blink>Hello</blink> today, browsers silently ignore the tag and the text appears normally — no warning, no error. The supported replacement is a CSS animation: a few lines of @keyframes that fade the element's opacity in and out.

Accessibility: blinking is a real WCAG concern

WCAG 2.2 Success Criterion 2.3.1 ("Three Flashes or Below Threshold") warns that flashing content can trigger seizures in people with photosensitive epilepsy. The same guideline group discourages blinking for anything that is not essential to the content's meaning. For most use cases — a callout badge, a "limited offer" tag, a debugging marker — a static highlight or an arrow icon communicates the same thing without the risk.

The generated CSS in this tool includes a @media (prefers-reduced-motion: reduce) block. Visitors who have turned on "Reduce motion" in their operating system will automatically see a static yellow-highlight version instead of the animation. This is the same pattern Apple, GitHub, and most modern design systems use to honor that user preference. The "Reduced motion" toggle in the tool lets you preview that fallback and copy the static-only HTML when you know the blink is purely decorative.

Example: a blinking badge

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

.badge-blink {
  color: #dc2626;
  font-weight: bold;
  animation: hp-blink 1s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .badge-blink {
    animation: none;
    background: #facc15;
    color: #1c1917;
    padding: 2px 6px;
    border-radius: 4px;
  }
}

<!-- 用法：<span class="badge-blink">Limited time</span> -->

Common mistakes

• Using <blink> in production and wondering why nothing happens. It has been removed from every browser for over a decade.
• Animating visibility: hidden instead of opacity: 0. Visibility changes are not GPU-accelerated and the text becomes unselectable while hidden.
• Skipping the prefers-reduced-motion media query. It is a 4-line block that takes 5 seconds to add and prevents real harm to a small but real group of users.
• Using setInterval to toggle a class for the blink effect. CSS animations are smoother, cheaper, and stop automatically when the tab is in the background.

FAQ

Related tools

References

• MDN — @keyframes
• MDN — Using CSS animations
• W3C — WCAG 2.2 Understanding 2.3.1 Three Flashes
• MDN — prefers-reduced-motion

Last updated: 2026-08-31