Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to Create Gradient Background Animation using HTML and CSS ?

  • Last Updated : 12 Jun, 2020

Gradient animation can be added to the background of your websites by using simple HTML and CSS @keyframes rule that generate the desired animation.

HTML Code: In the following example, the basic structure of the HTML page is implemented.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <title>Gradient Background Animation</title>
</head>
  
<body>
    <section>
        <div>
            <h2>GeeksforGeeks</h2>
            <p>Gradient background Animation</p>
        </div>
    </section>
</body>
  
</html>

CSS Code: In the following section, designing of the background is implemented using simple CSS @keyframes rule that provide the animation feature. Providing different gradient colors is done using linear-gradient() function.




<style>
    body {
        margin: 0;
        padding: 0;
        animation: effect 3s linear infinite;
    }
  
    section {
        width: 100%;
        height: 100vh;
    }
  
    div {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 3em;
    }
  
    h2 {
        text-align: center;
    }
  
    @keyframes effect {
        0% {
            background: linear-gradient(#008000, #00FF00);
        }
  
        50% {
            background: linear-gradient(#220080, #0084ff);
        }
  
        100% {
            background: linear-gradient(#e78f3c, #ff4800);
        }
    }
</style>

Complete Code: It is the combination of the above two code sections.




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <title>Gradient Background Animation</title>
</head>
  
<style>
    body {
        margin: 0;
        padding: 0;
        animation: effect 3s linear infinite;
    }
  
    section {
        width: 100%;
        height: 100vh;
    }
  
    div {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 3em;
    }
  
    h2 {
        text-align: center;
    }
  
    @keyframes effect {
        0% {
            background: linear-gradient(#008000, #00FF00);
        }
  
        50% {
            background: linear-gradient(#220080, #0084ff);
        }
  
        100% {
            background: linear-gradient(#e78f3c, #ff4800);
        }
    }
</style>
  
<body>
    <section>
        <div>
            <h2>GeeksforGeeks</h2>
            <p>Gradient background Animation</p>
        </div>
    </section>
</body>
  
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :