Animated Gradient Background in CSS
CSS

Animated Gradient Background in CSS

Animated Gradient Background in CSS

Hi, may be you are looking for animated background css technique. Today I will share a CSS technique with you to make a Animated Gradient Background in CSS. Gradient colors will keep changing with smooth animation effect.

We will use @keyframes Rule of CSS. It will work with almost all the browsers.

body{
  background: linear-gradient(125deg,#f62b48,#1e73c3,#f62b48);
  background-size: 400%;
  animation: bganimation 15s infinite;
}
@keyframes bganimation{
  0%{
    background-position: 0% 50%;
  }
  50%{
    background-position: 100% 50%;
  }
  100%{
    background-position: 0% 50%;
  }
}

The above CSS will set the background with gradient colors. Then the animation will keep changing the colors and repeating the animation continuously.

Thanks for visiting.

Author

I am a Full Stack Web Developer. I have more than 8 years of experience in the web design and development industry.

Leave a Reply

Your email address will not be published. Required fields are marked *