How can I create a smooth gradient background Animation?

Question

I have created a div which has a gradient background, and I want to change this gradient. I applied a keyframes animation which changed background color instantly. How can I make this change smooth?

div {
    width: 100px;
    height: 100px;
    background:linear-gradient(red, yellow);
    animation-name: colorchange;
    animation-duration: 5s;
    -webkit-animation-name: colorchange;
   animation-iteration-count: 5;
    -webkit-animation-duration: 5s;
    text-align: center;
}
@keyframes colorchange {
    0% {background:linear-gradient(red, yellow) }
    35% {background:linear-gradient(yellow, green) }
    70% {background:linear-gradient(green, red) }
    100%{background:linear-gradient(red, yellow)}
}

<div>
Gradient Background
</div>

Might be possible to use transitions, Im not 100% sure but maybe similar to this but without the hover : https://stackoverflow.com/questions/4411306/transition-of-background-color — trainmania100, Oct 19 '18 at 13:51
This shows on hover and shows only one color or gradient but want different gradient and different time stages — , Oct 19 '18 at 13:57

Marina · Accepted Answer · 2018-10-19T14:06:11.487

Try this

    div {
        text-align: center;
        width: 100px;
     height: 90px;
     color: #fff;
     background: linear-gradient(0deg, red, yellow, green);
     background-size: 400% 400%;
     -webkit-animation: Gradient 15s ease infinite;
     -moz-animation: Gradient 15s ease infinite;
     animation: Gradient 15s ease infinite;

        }
       @-webkit-keyframes Gradient {
     0% {
      background-position: 50% 0%
     }
     50% {
      background-position: 50% 100%
     }
     100% {
      background-position: 50% 0%
     }
    }

    @-moz-keyframes Gradient {
     0% {
      background-position: 50% 0%
     }
     50% {
      background-position: 50% 100%
     }
     100% {
      background-position: 50% 0%
     }
    }

    @keyframes Gradient {
     0% {
      background-position: 50% 0%
     }
     50% {
      background-position: 50% 100%
     }
     100% {
      background-position: 50% 0%
     }
    }

<div> Text </div>

score 0 · Answer 2 · answered Oct 19 '18 at 13:57

0

I might be wrong, but gradients don't support transitions.

There's a workaround I found in other related question: https://medium.com/@dave_lunny/animating-css-gradients-using-only-css-d2fd7671e759

answered Oct 19 '18 at 13:57

bvrtsz

46
1
5

bradib0y · Answer 3 · 2018-10-20T02:32:32.350

As far as I'm concerned, the smooth transition doesn't work with gradient backgrounds, only with straight colors.

You can create a large gradient background with many colors though, and use the transition to move it. This creates the illusion of the colors changing.

body {
 width: 100wh;
 height: 90vh;
 color: #fff;
 background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
 background-size: 400% 400%;
 -webkit-animation: Gradient 15s ease infinite;
 -moz-animation: Gradient 15s ease infinite;
 animation: Gradient 15s ease infinite;
}

@-webkit-keyframes Gradient {
 0% {
  background-position: 0% 50%
 }
 50% {
  background-position: 100% 50%
 }
 100% {
  background-position: 0% 50%
 }
}

@-moz-keyframes Gradient {
 0% {
  background-position: 0% 50%
 }
 50% {
  background-position: 100% 50%
 }
 100% {
  background-position: 0% 50%
 }
}

@keyframes Gradient {
 0% {
  background-position: 0% 50%
 }
 50% {
  background-position: 100% 50%
 }
 100% {
  background-position: 0% 50%
 }
}

h1,
h6 {
 font-family: 'Open Sans';
 font-weight: 300;
 text-align: center;
 position: absolute;
 top: 45%;
 right: 0;
 left: 0;
}

<h1>Hello World!</h1>

How can I create a smooth gradient background Animation?

3 Answers3