This article was co-authored by our trained team of editors and researchers who validated it for accuracy and comprehensiveness. Together, they cited information from 10 references, which can be found at the bottom of the page.

Blinking text was never part of HTML's standard functions, and there's no approach that works for every browser. The closest option that uses only HTML is the marquee tag, but even this does not work with Google Chrome. JavaScript is a more reliable method, and you can copy-paste the code directly into your HTML document.

Steps

Method1

Using the Marquee Tag

1

Use this for personal projects only. The marquee tag is obsolete, and developers are strongly encouraged to avoid it. Different browsers will display it differently, and future updates could prevent the text from blinking at all.[1][2]Learn the Javascript approach instead if you are creating a professional web site.

Google Chrome does not support the "scrollamount" attribute, which this method relies on.[3] In that browser, your text will scroll across the page instead of blinking.

2

Insert the marquee tags around the blinking text. Open your HTML document in a simple text editor. Type <marquee> in front of the text you would like to blink. Type </marquee> after the text.

Set the text width. Change the opening tag to <marquee width="300">. This will not change the size of your font. There are two reasons why you might need to change this to a different number:

If your text does not fit, it will scroll instead of blinking. Increase the width to prevent this.

In Chrome, the text will scroll across a distance determined by the width.

4

Set the scrollamount to the same value as the width. Inside the same tag, write scrollamount="300" (or the same number as the width). By default, marquee text scrolls across the page. By setting the scroll amount to the same number as the width, the text will "scroll" into the same position it was already in. This causes a blink effect.

Change the scroll delay. Open the HTML file in a web browser to see the effect. If the text is blinking too quickly or too slowly, change the speed with the attribute scrolldelay="500". The default delay is set to 85.[4] Use a higher number for a slower blink, or a lower number for a faster blink.

You should now have:
<marquee width="300" scrollamount="300" scrolldelay="500">Blinking text here.</marquee>

6

Limit the number of blinks (optional). Many web users find blinking text annoying. To stop the animation once you've grabbed the reader's attention, enter loop="7". Now the text will blink seven times, then disappear. (You can use any number instead of seven.)

Insert the command to load your script. The code above defined a function and named it "blinktext." In order to use this function in your HTML, change the <body> tag to <body onload="blinktext();">.

3

Define your blinking text as an announcement. This script only affects elements with the id "announcement." Place your blinking text inside any element and give it that id. For example, type <p id="announcement">Blinking text here.</p> or <div id="announcement">Blinking text here.</div>.

You can rename this anything you like. Just make sure to use the same word in the script and the element id.

4

Adjust the script. The number "1000" in the script sets the delay between blinks. This is in microseconds, so a value of 1000 makes the text blink once per second.[6] Change this to a lower number to speed up the blinking, or a higher number to slow it down.

The actual delay probably won't match this value perfectly. It tends to be slightly shorter, but can take longer if your browser is busy with other requests.

Community Q&A

Tips

You can adjust the appearance of marquee text with the style attribute. Try adding style="border:solid".

You can include a height attribute inside the marquee tag as well as width, but many browsers will ignore it.[7] You may notice a difference if you have added a border to the marquee.

You can also use CSS Animations to make text blink. This is fairly complicated, and not recommended for CSS beginners. Note that you will need a linked CSS document, since Firefox does not support CSS Animations with inline CSS.[8]

Warnings

Do not use the <blink> tag or the text-decoration CSS styling, which very few modern browsers support.[9][10]