Welcome to a tutorial on how to create blinking text and background with HTML CSS. Once upon a time in the dark ages of the Internet, creating animations involves the use of Javascript, timer functions, and fighting with digital dragons.
In modern CSS, we only need to define a set of keyframes and attach the animation to create a block of blinking text:
@keyframes blink { 0% { color:red; } 100% { color:green; } }
<div style="animation: blink 1s infinite">This blinks!</div>
That is the gist of it, but let us walk through more examples of how to create blinking effects – Read on!
TLDR – QUICK SLIDES
Fullscreen Mode – Click Here
TABLE OF CONTENTS
BLINKING BACKGROUND & TEXT
All right, let us now get into some examples of creating blinking animations in HTML and CSS.
EXAMPLE 1) BLINKING BACKGROUND
<style>
/* (A) BLINKING KEYFRAMES */
@keyframes blinkingA {
0% {
border: 5px solid red;
background: lightpink;
}
100% {
border: 5px solid blue;
background: lightblue;
}
}
/* (B) ATTACH BLINKING KEYFRAMES TO CONTAINER */
/* animation: name | time | iterations */
#demoA {
width: 300px; height: 300px;
animation: blinkingA 1s infinite;
}
</style>
<div id="demoA"></div>
To create a blinking background:
- Start by defining a set of
@keyframes NAME
. Since we are creating a blinking background, we will alternate between two colors. - This should be self-explanatory, attach the keyframes to the container using
animation: NAME TIME ITERATION
NAME
The name of the set of keyframes.TIME
How fast the animation should be. Keep this short (fast enough), or it will turn into a “background transition”.ITERATIONS
The number of iterations/repetitions.
EXAMPLE 2) BLINKING TEXT
<style>
/* (A) BLINKING KEYFRAMES */
@keyframes blinkingB {
0% { color: red; }
100% { color: blue; }
}
/* (B) ATTACH BLINKING KEYFRAMES TO TEXT */
#demoB {
font-size: 1.3em; font-weight: 700;
animation: blinkingB 1s infinite;
}
</style>
<p id="demoB">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Yep, CSS animation also works on text. The only difference here is that we are animating the text color
instead of the background
. The rest of the mechanics remain the same.
EXAMPLE 3) BLINKING NOTIFICATION
<style>
/* (A) WARNING KEYFRAMES */
@keyframes blinkingC {
0% {
color: white;
background: red;
}
100% {
color: lightcyan;
background: blue;
}
}
/* (B) ATTACH WARNING KEYFRAMES TO CONTAINER */
#demoC {
padding: 10px;
font-size: 1.3em; font-weight: 700;
animation: blinkingC 1s infinite;
}
</style>
<div id="demoC">
Warning: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
Put the blinking background and text together, just what good will it do? This “blinking billboard” sure attracts a lot of attention – Maybe a good fit for stuff like displaying critical system messages, or even time-limited offers.
EXAMPLE 4) BLINK ON CLICK
<style>
/* (A) BLINKING KEYFRAMES */
@keyframes blinkingD {
0% {
color: white;
background: red;
}
100% {
color: lightcyan;
background: blue;
}
}
/* (B) CONTAINER COSMETICS */
#demoD {
padding: 10px;
font-size: 1.3em; font-weight: 700;
}
/* (C) ATTACH BLINKING KEYFRAMES TO CSS CLASS */
.blinkD { animation: blinkingD 1s 2; }
</style>
<script>
// (D) JAVASCRIPT TO ATTACH BLINKING EFFECT
function blink () {
var target = document.getElementById("demoD");
target.onanimationend = () => target.classList.remove("blinkD");
target.classList.add("blinkD");
}
</script>
<div id="demoD" onclick="blink()">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
If you want to “show blink on demand”:
- (A) Create the
keyframes
as usual. - (C) But set the
animation
on a CSS class instead. - (D) Use Javascript to toggle the “blink” CSS class on your selected element.
DOWNLOAD & NOTES
Here is the download link to the example code, so you don’t have to copy-paste everything.
SUPPORT
600+ free tutorials & projects on Code Boxx and still growing. I insist on not turning Code Boxx into a "paid scripts and courses" business, so every little bit of support helps.
Buy Me A Meal Code Boxx eBooks
EXAMPLE CODE DOWNLOAD
Click here for the source code on GitHub gist, just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.
EXTRA BITS & LINKS
That’s all for the scripts, and here are a few small extras that you may find useful.
EXTRA) ADDING MORE KEYFRAMES
@keyframes blinking {
0% { background: red; }
50% { background: green; }
100% { background: blue; }
}
We can “add more colors” by introducing more keyframes, but this is more like a “rainbow” than a “blink”.
EXTRA) BLINK ON MOUSE HOVER
#ELEMENT:hover { animation: ... }
That’s right, we can only attach the blink animation to mouse hover.
LINKS & REFERENCES
- CSS Keyframes – MDN
- CSS Animations – MDN
TUTORIAL VIDEO
INFOGRAPHIC CHEAT SHEET

THE END
Thank you for reading, and we have come to the end of this short tutorial. I hope that it has given you a few ideas on how to create a blinking effect in CSS, and if you have anything to add to this guide, please feel free to comment below. Good luck and happy coding!