Open In App

How to animate gradient background smoothly using CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

Background switching animation is an essential part of modern website engagement concepts. There are many types of background-switching animation. They all are made using JavaScript or some CSS framework, but we are pro-front-end developers we will be doing it with Vanilla CSS. It is only the normal CSS.

In this tutorial, we will be learning background transition which is in gradient, slides from the right bottom corner to the top right corner in an infinite loop. This can also be used for image carousels. It looks really outstanding if you can think of putting it in the right place in the correct manner on your website.

Approach:

  1. Create some HTML div, one more than the number of gradients you want. 
  2. The extra div is the main layer with all the colors, we will add the animation to it.
  3. Animate the layer div, and animate them on some interval.
  4. Add the CSS animation-direction in the first layer.
  5. At last, style the keyframes to time the animation at the correct time.

Syntax:

@keyframes animation_name {
      keyframes-selector {
           css-styles;
     }
}

HTML Code: Create the main layer along with the number of layers you want the gradient colors to be. So the total layers will be one extra layer than the number of gradient colors. Also, we will animate them to have 2 more layers of less saturation.

HTML




<!DOCTYPE html>
<html lang="en">
    
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
    
<body>  
    <h1>GeeksforGeeks</h1
    <h2>
       Animate gradient background smoothly using CSS
    </h2>
    <div class="main__bg"></div>
    <div class="main__bg layer1"></div>
    <div class="main__bg layer2"></div>
</body>  
</html>


CSS Code: We add the gradient colors as the background image so that we can transition them rather than having just the background. Adding the animation to the main layer, then we make the position fixed and cover the whole div by setting the top and bottom to 0. The right and the left side are positioned at “-50%” so that the gradient background would look like sliding from corner to corner.

Timing the animation of all the layers and finally doing the keyframes correctly, so that everything is executed properly.

CSS




body {
    display: grid;
    place-items: center;
    color: yellow;
}
  
.main__bg {
    background-image: linear-gradient(-60deg, #404258 50%, #6B728E 50%);
    animation: slide 3s ease-in-out infinite alternate;
    position: fixed;
    top: 0;
    bottom: 0;
    left: -50%;
    right: -50%;
    opacity: 0.5;
    z-index: -1;
}
  
.layer1 {
    animation-direction: alternate-reverse;
    animation-duration: 4s;
}
  
.layer2 {
    animation-duration: 5s;
}
  
@keyframes slide {
    0% {
        transform: translateX(-25%);
    }
    100% {
        transform: translateX(25%);
    }
}


Output: Check the output live.



Last Updated : 16 Dec, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads