CSS Animated Gradient Background Tutorial

In this tutorial I’m going to show you how to create CSS animated gradient background with literally in just a couple minutes. Let’s check it out!

Gradient is NOT Animatable

The problem with creating animated gradient background is that gradient is not an animatable properties (See W3schools.com) This means you can’t just use CSS keyframes with that. But don’t worry the workaround is very simple let’s work on that together!

The Solution

Here my HTML and suppose that I want to apply the animated gradient background to the wrapper.

<div class="wrapper"></div>

First let’s start with defining the width and height. This is up to you but I’m going to use 100% for both. Then apply the background gradient. I’m going to set the angle to 45 degrees and add around six colors. You can add as many as you like.

.wrapper {
    width:100%;
    height: 100%;
    background: linear-gradient(45deg,#F17C58,#E94584,#24AADB,#27DBB1,#FFDC18,#FF3706);
}

Here is what it looks like so far.

Now we’re going to scale this background horizontally so it becomes a lot wider than the screen.
We can do this by using background size property and set it to 600%. the more color you have the more you will need to increase the number.

background-size: 600% 100%;

And next create the animation to move the background position so it appears that the gradient is slowly transforming color. I’m going to use alternate animation-direction so when the background is moved to the end, it will move backward automatically.

.wrapper {
    width:100%;
    height: 100%;
    background: linear-gradient(45deg,#F17C58, #E94584, #24AADB , #27DBB1,#FFDC18, #FF3706);
    background-size: 600% 100%;
    animation: gradient 16s linear infinite;
    animation-direction: alternate;
}
@keyframes gradient {
    0% {background-position: 0%}
    100% {background-position: 100%}
}

And that’s it! Check video below for the tutorial in action!

See the Pen Pure CSS Animated Gradient Background by red_stapler (@redstapler) on CodePen.

Pretty easy, right? So that’s all for this tutorial. Hope you guys enjoy and also don’t forget to subscribe our Youtube Channel or our Facebook to stay tune!