CSS Gradient Background with Animation: 2 Demos

Generating the gradient background in CSS

The gradient CSS property can be used for the smooth transition of different colors that otherwise need to be done by using images.

You may use the gradient property for different reasons; one of the purposes is to use it as background for the whole web page or different elements.

In this tutorial, I am going to show you live demos and code for gradient background CSS properties.

A demo of animated background gradient

See the demo online where magenta, cyan, and white colors are used for linear gradients with different times of animation. It also used @-webkit-keyframes for hue with different angle values:

CSS gradient background

See online demo and code

The .div-gradient class defines the gradient along with its child elements, for example, this is the second div element:

.div-gradient:nth-child(2) {
box-shadow: 0 0 45vmax 45vmax magenta;
-webkit-animation: hue 10s 0s linear infinite,
move1 19s 0s linear infinite;
animation: hue 10s 0s linear infinite,
move1 19s 0s linear infinite;
}

You can see, it defines the box-shadow, webkit-animation where the linear gradient is used. Similarly, other div element properties are set by using these and animation, etc.

Get the complete code, including HTML and compiled CSS from the demo page.

A demo with other color combinations and angles

In this demo, only the colors are changed along with different angles for hue-rotate and time of the animation.

CSS gradient

Complete code:

<!DOCTYPE html>
<html>
<head>
 <style>
 body {
  background: #000;
}
h1 {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 48vh;
  color: #fff;
  font-family: 'Trebuchet MS', Helvetica, sans-serif;
  letter-spacing: .7em;
  font-size: 20pt;
  font-weight: normal;
  opacity: .2;
  text-transform: uppercase;
}
.div-gradient {
  position: absolute;
  width: .001vmin;
  height: .001vmin;
  border-radius: 50%;
  opacity: .25;
}
.div-gradient:nth-child(2) {
  box-shadow: 0 0 45vmax 45vmax #408080;
  -webkit-animation: hue 20s 0s linear infinite,
    move1 19s 0s linear infinite;
          animation: hue 20s 0s linear infinite,
    move1 19s 0s linear infinite;
}
.div-gradient:nth-child(3) {
  box-shadow: 0 0 45vmax 45vmax #400000;
  -webkit-animation: hue 35s 0s linear infinite,
    move2 25s 0s linear infinite;
          animation: hue 35s 0s linear infinite,
    move2 25s 0s linear infinite;
}
.div-gradient:nth-child(4) {
  box-shadow: 0 0 45vmax 45vmax #008000;
  -webkit-animation: hue 10s 0s linear infinite,
    move3 15s 0s linear infinite;
          animation: hue 10s 0s linear infinite,
    move3 15s 0s linear infinite;
  opacity: .2;
}
@-webkit-keyframes hue {
  0% {
    -webkit-filter: hue-rotate(10deg);
            filter: hue-rotate(45deg);
  }
  100% {
    -webkit-filter: hue-rotate(360deg);
            filter: hue-rotate(360deg);
  }
}
@keyframes hue {
  0% {
    -webkit-filter: hue-rotate(10deg);
            filter: hue-rotate(45deg);
  }
  100% {
    -webkit-filter: hue-rotate(180deg);
            filter: hue-rotate(180deg);
  }
}
@-webkit-keyframes move1 {
  0% {
    top: 0vh;
    left: 50vw;
  }
  25% {
    left: 0vw;
  }
  50% {
    top: 100vh;
  }
  75% {
    left: 100vw;
  }
  100% {
    top: 0vh;
    left: 50vw;
  }
}
@keyframes move1 {
  0% {
    top: 0vh;
    left: 50vw;
  }
  25% {
    left: 0vw;
  }
  50% {
    top: 100vh;
  }
  75% {
    left: 100vw;
  }
  100% {
    top: 0vh;
    left: 50vw;
  }
}
@-webkit-keyframes move2 {
  0% {
    top: 50vh;
    left: 100vw;
  }
  25% {
    top: 100vh;
  }
  50% {
    left: 0vw;
  }
  75% {
    top: 0vh;
  }
  100% {
    top: 50vh;
    left: 100vw;
  }
}
@keyframes move2 {
  0% {
    top: 50vh;
    left: 100vw;
  }
  25% {
    top: 100vh;
  }
  50% {
    left: 0vw;
  }
  75% {
    top: 0vh;
  }
  100% {
    top: 50vh;
    left: 100vw;
  }
}
@-webkit-keyframes move3 {
  0% {
    top: 100vh;
    left: 50vw;
  }
  25% {
    left: 100vw;
  }
  50% {
    top: 0vh;
  }
  75% {
    left: 0vw;
  }
  100% {
    top: 100vh;
    left: 50vw;
  }
}
@keyframes move3 {
  0% {
    top: 100vh;
    left: 50vw;
  }
  25% {
    left: 100vw;
  }
  50% {
    top: 0vh;
  }
  75% {
    left: 0vw;
  }
  100% {
    top: 100vh;
    left: 50vw;
  }
}

 </style>
</head>
<body>

<h1>A demo of background gradient</h1>
<div class="div-gradient"></div>
<div></div>
<div></div>
</body>
</html>

 

Credit: here