Flashing Text Generator

Type a line, press Play and save the blink as a short video or as CSS, not as a GIF.

This is a sample. Type your own to replace it.

NOW OPENNOW OPEN

Slow blink motion. Teko, soft glow look, red display.

More options

What you type is kept in this browser, so it is here when you come back. Nothing is sent to us.

Next step Text that moves, not blinks

All 12 flashing presets, with their CSS

Blinks: the whole line, off and on

  • Slow blink. The whole line switches off and on with a hard step, a little slower than once a second: lit for 0.7 seconds, dark for 0.5. Its CSS does the job the blink tag did before browsers dropped it.
    CSS of Slow blink
    .wf-slow-blink {
  display: inline-block;
  animation: wf-slow-blink 1200ms step-end infinite both;
}
@keyframes wf-slow-blink {
  0%, 100% { opacity: 1; }
  60% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .wf-slow-blink { animation: none; }
}
  • Soft blink. The same slow blink with the switch taken out: the line fades down to nothing and back up, like a light on a dimmer.
    CSS of Soft blink
    .wf-soft-blink {
  display: inline-block;
  animation: wf-soft-blink 1200ms ease-in-out infinite both;
}
@keyframes wf-soft-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .wf-soft-blink { animation: none; }
}
  • Double blink. Two quick blinks, then a rest of more than a second, in a two-second loop. Both blinks fall inside one second, so Speed stops at 1.
    CSS of Double blink
    .wf-double-blink {
  display: inline-block;
  animation: wf-double-blink 2000ms step-end infinite both;
}
@keyframes wf-double-blink {
  0%, 20%, 40%, 100% { opacity: 1; }
  10%, 30% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .wf-double-blink { animation: none; }
}
  • Warning light. Amber, with a halo, fading almost out and back once every two seconds. The motion sets the amber itself, whatever colour the line had.
    CSS of Warning light
    .wf-warning-light {
  display: inline-block;
  animation: wf-warning-light 2000ms ease-in-out infinite both;
}
@keyframes wf-warning-light {
  0%, 100% { opacity: 1; color: #ffb300; text-shadow: 0 0 0.2em currentColor, 0 0 0.8em currentColor; }
  50% { opacity: 0.15; color: #ffb300; text-shadow: 0 0 0.08em currentColor, 0 0 0.2em currentColor; }
}
@media (prefers-reduced-motion: reduce) {
  .wf-warning-light { animation: none; }
}
  • Three flashes then steady. The line goes dark three times, a little over a second apart, and then stays lit. Plays once.
    CSS of Three flashes then steady
    .wf-three-flashes-then-steady {
  display: inline-block;
  animation: wf-three-flashes-then-steady 3600ms step-end both;
}
@keyframes wf-three-flashes-then-steady {
  0%, 18%, 48%, 78%, 100% { opacity: 1; }
  10%, 40%, 70% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .wf-three-flashes-then-steady { animation: none; }
}

Swaps: a change with no dark gap

  • Two colors. The line switches between yellow and cyan once a second and is never dark. Made for a dark background.
    CSS of Two colors
    .wf-two-colors {
  display: inline-block;
  animation: wf-two-colors 2000ms step-end infinite both;
}
@keyframes wf-two-colors {
  0%, 100% { color: #ffe14d; }
  50% { color: #4de1ff; }
}
@media (prefers-reduced-motion: reduce) {
  .wf-two-colors { animation: none; }
}
  • Red and blue. Red for a second and a half, then blue for a second and a half, with a hard switch and no dark gap between them.
    CSS of Red and blue
    .wf-red-and-blue {
  display: inline-block;
  animation: wf-red-and-blue 3000ms step-end infinite both;
}
@keyframes wf-red-and-blue {
  0%, 100% { color: #ff3b30; }
  50% { color: #3d7bff; }
}
@media (prefers-reduced-motion: reduce) {
  .wf-red-and-blue { animation: none; }
}
  • Glow on and off. The letters stay lit while the halo round them switches on for a second and off for a second. It needs a dark background to show.
    CSS of Glow on and off
    .wf-glow-on-and-off {
  display: inline-block;
  animation: wf-glow-on-and-off 2000ms step-end infinite both;
}
@keyframes wf-glow-on-and-off {
  0%, 100% { text-shadow: 0 0 0.2em currentColor, 0 0 0.8em currentColor; }
  50% { text-shadow: 0 0 0.08em currentColor, 0 0 0.2em currentColor; }
}
@media (prefers-reduced-motion: reduce) {
  .wf-glow-on-and-off { animation: none; }
}

Chases: letters or words in turn

  • Marquee bulbs. Every fourth letter is dim and the dim spot runs left to right, one letter every 0.3 seconds, like the border of a theater sign.
    CSS of Marquee bulbs
    .wf-marquee-bulbs .wf-u {
  display: inline-block;
  white-space: pre;
  animation: wf-marquee-bulbs 1200ms step-end infinite both;
  animation-delay: calc(var(--i) * 300ms);
}
@keyframes wf-marquee-bulbs {
  0%, 100% { opacity: 1; }
  75% { opacity: 0.25; }
}
@media (prefers-reduced-motion: reduce) {
  .wf-marquee-bulbs .wf-u { animation: none; }
}
  • Chase. One bright letter runs along a dim line, a tenth of a second on each letter, and starts again every two seconds.
    CSS of Chase
    .wf-chase .wf-u {
  display: inline-block;
  white-space: pre;
  animation: wf-chase 2000ms step-end infinite both;
  animation-delay: calc(var(--i) * 100ms);
}
@keyframes wf-chase {
  0%, 100% { opacity: 0.3; }
  95% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .wf-chase .wf-u { animation: none; }
}
  • Word by word. Each word lights for half a second while the others wait dim, in reading order. A line of four words loops with no pause.
    CSS of Word by word
    .wf-word-by-word .wf-u {
  display: inline-block;
  white-space: pre;
  animation: wf-word-by-word 2000ms step-end infinite both;
  animation-delay: calc(var(--i) * 500ms);
}
@keyframes wf-word-by-word {
  0%, 100% { opacity: 0.3; }
  75% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .wf-word-by-word .wf-u { animation: none; }
}
  • Fill up. The line starts dim and its letters light one by one, left to right, until the whole line is lit. Plays once and holds.
    CSS of Fill up
    .wf-fill-up .wf-u {
  display: inline-block;
  white-space: pre;
  animation: wf-fill-up 150ms step-end both;
  animation-delay: calc(var(--i) * 150ms);
}
@keyframes wf-fill-up {
  0% { opacity: 0.2; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .wf-fill-up .wf-u { animation: none; }
}

Own work. Every preset was written for this page as plain numbers: what switches (the whole line, a word or a letter), how long one cycle lasts, the delay between neighbours, the easing, and a short list of stops giving opacity, colour or glow. The CSS stored with each preset is worked out from those numbers, in the form of this site's animated text page, and every one was checked in a browser to parse, run with the stated duration and stop under prefers-reduced-motion with the words visible. There are 12 presets: 5 blinks, 3 swaps and 4 chases. None is among the animated text page's presets, and the names and timings are this site's own. The brightness of one unit was sampled every millisecond and its falls counted in the busiest second: the highest count is 2, at the fastest speed the tool allows for that preset, against the limit of three in WCAG success criterion 2.3.1 (https://www.w3.org/WAI/WCAG22/Understanding/three-flashes-or-below-threshold.html). The tool does not let a preset that dims twice a second or more be sped up. Every preset's CSS ends with a prefers-reduced-motion rule (https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion). The font suggested for each preset is one of the eight bundled with this page, all under the SIL Open Font License 1.1 as recorded in the tool's own font list. Checked on 2026-10-01.

Fonts on this page

Show the list

Every font in this tool is free to use, also for things you sell. The files are served from this site under their open licence.

  • Teko by Indian Type Foundry. Copyright 2023 The Teko Project Authors (https://www.github.com/googlefonts/teko). SIL Open Font License 1.1 (variable axes pinned (wght 600), reduced to the Latin characters, saved as WOFF2)
  • Oswald by Vernon Adams, Kalapi Gajjar, Cyreal. Copyright 2016 The Oswald Project Authors (https://github.com/googlefonts/OswaldFont). SIL Open Font License 1.1 (variable axes pinned (wght 600), reduced to the Latin characters, saved as WOFF2)
  • Archivo Black by Omnibus-Type. Copyright 2017 The Archivo Black Project Authors (https://github.com/Omnibus-Type/ArchivoBlack). SIL Open Font License 1.1 (reduced to the Latin characters, saved as WOFF2)
  • Black Ops One by James Grieshaber, Eben Sorkin. Copyright 2022 The Black-Ops Project Authors (https://github.com/googlefonts/googlefonts-project-template). SIL Open Font License 1.1 (reduced to the Latin characters, saved as WOFF2)
  • DSEG14 Classic by keshikan. Copyright (c) 2017, keshikan (http://www.keshikan.net),. SIL Open Font License 1.1
  • Press Start 2P by CodeMan38. Copyright 2012 The Press Start 2P Project Authors (cody@zone38.net), with Reserved Font Name "Press Start 2P". SIL Open Font License 1.1
  • Silkscreen by Jason Kottke. Copyright 2001 The Silkscreen Project Authors (https://github.com/googlefonts/silkscreen). SIL Open Font License 1.1 (reduced to the Latin characters, saved as WOFF2)
  • Share Tech Mono by Carrois Apostrophe. Copyright (c) 2012, Carrois Type Design, Ralph du Carrois (post@carrois.com www.carrois.com), with Reserved Font Name 'Share'. SIL Open Font License 1.1

How it works

This flashing text generator makes your own line blink, swap colors or light up letter by letter. Press Play to watch it, then leave with a short looping video or the CSS. It makes no GIF. Nothing here dims more than three times a second.

Read the full guide

Pick how it flashes

The Motion menu has three groups. Blinks switch the whole line off and on. Swaps change its color with no dark gap. Chases light letters or words in turn. Nothing moves until you press Play, and Pause stops it at once.

Take it with you

Download video records the blink as a clip that loops cleanly. Copy CSS and Copy HTML give the same blink for a web page. To use this as a flashing font generator, open More options and tap a font tile: the eight are sign and screen faces, from narrow Teko to fourteen-segment DSEG14 and pixel-built Silkscreen.

  • Double blink will not play faster than Speed 1. It already dims twice inside one second.
  • Warning light, Two colors and Red and blue bring their own colors, whatever color the line had.
  • DSEG14, the fourteen-segment face, holds unaccented letters, digits and basic punctuation only.

Questions and answers

Can it make a flashing text GIF?

No. This page makes no GIF. It records the blink as a short video, WebM or MP4 depending on your browser, and it gives the CSS and HTML that draw the same blink on a web page.

How fast does the text flash?

Slowly. No preset dims more than twice in any one second, even at double Speed. Every one was counted, and the tool refuses a preset that would dim more than three times a second, the limit the WCAG accessibility guidelines set for flashing.

Does this work as a blinking text generator for a web page?

Yes. Browsers dropped the old blink tag, and CSS keyframes do its job now. Copy CSS gives the keyframes and Copy HTML the markup. The CSS switches the blink off for any visitor whose device asks for reduced motion.

Why did the blink play once and stop?

Your device is set to reduce motion. With that setting on, a loop here plays one turn and the still line comes back. Press Play to see it again.

More tools

Show 8 more

Browse Text styles