Open In App

How to Add Blinking Background Color in JavaScript ?

Last Updated : 01 Sep, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn how to create a blinking background color. Adding a blinking background color to an element can be an attention-grabbing visual effect that can be useful in various web applications. It can be achieved using JavaScript by toggling the background color of an element between two or more colors at regular intervals.

Below are the approaches through which we can do this:

  • Using setInterval() Method
  • Using CSS Animations and JavaScript

Approach 1: Using setInterval() Method

We can use the setInterval() method to repeatedly toggle the background color of an element. The setInterval() method executes a given function at specified intervals (in milliseconds).

Syntax:

window.setInterval(function, milliseconds);

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Blinking Background Color
    </title>
</head>
  
<body>
    <!-- The div that will have the 
        blinking background -->
    <div id="blinkDiv" style="width: 400px; 
                height: 100px; 
                padding: 20px; 
                text-align: center; 
                font-size: 24px;">
                  
        <!-- Content inside the div -->
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
    </div>
  
    <script>
  
        // Get the div element by its ID
        const blinkDiv =
            document.getElementById('blinkDiv');
  
        // An array of colors to be used for blinking
        const colors = ['#ff0000', 'black', '#0000ff'];
  
        // Variable to keep track of the
        // current color index
        let currentColorIndex = 0;
  
        // Function to toggle the background
        // color of the div
        function blinkBackground() {
            blinkDiv.style.backgroundColor =
                colors[currentColorIndex];
            currentColorIndex =
                (currentColorIndex + 1) % colors.length;
        }
  
        // Start the blinking by setting an interval 
        // that calls the blinkBackground 
        // function every 1000ms (1 second)
        const blinkingInterval =
            setInterval(blinkBackground, 1000);
  
        // To stop blinking after 5 seconds, 
        // use setTimeout to clear the interval
        setTimeout(() => {
            clearInterval(blinkingInterval);
        }, 5000);
    </script>
</body>
  
</html>


Output:

gifgit-(64)

Approach 2: Using CSS Animations

In this approach, we will use CSS animations for blinking the background color. CSS Animations is a technique to change the appearance and behavior of various elements in web pages.

Syntax:

/*property-name*/: /*value*/;

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Blinking Background Color
    </title>
  
    <style>
      
        /* Define a CSS animation named "blink" */
        @keyframes blink {
  
            0%,
            100% {
                background-color: #ff0000;
                /* First color - red */
            }
  
            50% {
                background-color: black;
                /* Second color - black */
            }
        }
  
        /* Apply the "blink" animation to 
        elements with class "blinking-effect" */
        .blinking-effect {
            animation: blink 1s linear infinite;
            /* The animation will run indefinitely */
        }
    </style>
</head>
  
<body>
    <!-- The div that will have the blinking background -->
    <div id="blinkDiv" class="blinking-effect" 
        style="width: 400px; 
               height: 100px; 
               padding: 20px; 
               text-align: center; 
               font-size: 24px;">
        <!-- Content inside the div -->
        <h1 style="color:green">
            GeeksforGeeks
        </h1>
    </div>
</body>
  
</html>


Output:

gifgit-(27)



Similar Reads

How to make a blinking text using jQuery ?
Given an HTML document and the task is to blink the certain text of an element using jQuery. There are few techniques to solve this problem which are discussed below: Approach 1: Select a particular element from the document. Toggle its visibility property from hidden to visible and vice-versa after a particular period of time. Example 1: This exam
2 min read
How to Create Blinking Text using CSS ?
Blinking text effect also be known as the flashing text effect can be easily created using HTML and CSS @keyframes rule and the opacity property. HTML Code: In this section, we will create a basic div element which will have some text inside it. &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;
2 min read
How to change text color depending on background color using JavaScript?
The task is to set the foreground color based on the background color so that it will become visible. Here few of the important techniques are discussed. We are going to use JavaScript. Approach: First, select the random Background color(by selecting random RGB values) or a specific one.Use the YIQ formula to get the YIQ value.Depending on the YIQ
3 min read
Difference between background and background-color
Background Property The background property in CSS is very commonly used and contains many variants. The background property consists of all the following properties:background-colorbackground-imagebackground-positionbackground-sizebackground-repeatbackground-originbackground-clipbackground-attachmentExample: C/C++ Code &amp;lt;style&amp;gt; h1 { b
1 min read
How to choose background color through color picker?
In this project, we are going to change the background color with the help of the Color Picker. Glimpse of the Project: Approach: Create an HTML file in which we are going to add the text and a color picker which helps to change the background color of our web-page.Create a CSS style to give some animation effects to the web-page elements.Create a
3 min read
Chakra UI Color and background color
Chakra UI, working smoothly with React, makes it easy to make your app look good. It's Color and background color helps you choose colors and backgrounds for your app in a way that's simple and makes sense. Chakra UI gives you a set of colors and backgrounds that are known to look good together. You can easily use these colors to make your text, bu
2 min read
How to Change Background Color with Color Range Slider in HTML?
To Change the Background Color using an HTML rounded slider that dynamically changes the webpage's background as the slider thumb is moved along its track, giving a visual indication of the selected color. The approach provides a convenient method for customizing the visual appearance of the webpage in real-time. ApproachThe HTML document defines a
2 min read
How to add Background-Color for Text Width Instead of Entire Element Width using CSS ?
In this article, we will see how to add background color for the text width instead of the entire element width using CSS. The display: inline or display: inline-block property is used to set the background color of the text width. Syntax: display: inline; display: inline-block; Approach: We will create an element and then apply the display: inline
2 min read
How to Add Background Color in Input and Text Fields using CSS ?
In this article, we will explore different approaches to adding background color to input and text fields using CSS. Customizing the appearance of input and text fields is an essential aspect of web design, and changing the background color is a powerful way to enhance the visual appeal of these elements. Method 1: Basic CSS StylingThe basic method
2 min read
How to add background color to a div in Bootstrap ?
Bootstrap provides many classes to set the background color of an element. We can easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Some classes of background colors are listed below example. We can add background color to a div by simply adding class "bg-primary", "
2 min read