Animated Gradient Background with Pure CSS

Category: Animation , CSS & CSS3 | July 5, 2014
1 Comment
Authorblucube
Last UpdateJuly 5, 2014
LicenseUnknown
Tags
,
Views7,582 views
OfficialGo to website
Live DemoDownload
Animated Gradient Background with Pure CSS

An animated gradient background using CSS3 box-shadow property and keyframe animations, written in LESS and created by blucube.

How to use it:

Create three DIV layers for the animated gradient background.

<body>
<div></div>
<div></div>
<div></div>
</body>

The LESS code.

@diameter: 45vmax;
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 {
  position: absolute;
  width: .001vmin;
  height: .001vmin;
  border-radius: 50%;
  opacity: .25;
}
div:nth-child(2) {
  box-shadow: 0 0 @diameter @diameter magenta;
  animation: 
    hue 10s 0s linear infinite,
    move1 19s 0s linear infinite;
}
div:nth-child(3) {
  box-shadow: 0 0 @diameter @diameter white;
  animation: 
    hue 15s 0s linear infinite,
    move2 25s 0s linear infinite;
}
div:nth-child(4) {
  box-shadow: 0 0 @diameter @diameter cyan;
  animation: 
    hue 20s 0s linear infinite,
    move3 15s 0s linear infinite;
  opacity: .2;
}
@keyframes hue {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}
@keyframes move1 {
  0% {
    top: 0vh;
    left: 50vw;
  }
  25% {
    left: 0vw;
  }
  50% {
    top: 100vh;
  }
  75% {
    left: 100vw;
  }
  100% {
    top: 0vh;
    left: 50vw;
  }
}
@keyframes move2 {
  0% {
    top: 50vh;
    left: 100vw;
  }
  25% {
 	top:  100vh;
  }
  50% {
    left: 0vw;
  }
  75% {
    top: 0vh;
  }
  100% {
    top: 50vh;
    left: 100vw;
  }
}
@keyframes move3 {
  0% {
    top: 100vh;
    left: 50vw;
  }
  25% {
 	left: 100vw;
  }
  50% {
    top: 0vh;
  }
  75% {
    left: 0vw;
  }
  100% {
    top: 100vh;
    left: 50vw;
  }
}

Or use CSS styles.

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 {
  position: absolute;
 width: .001vmin;
 height: .001vmin;
  border-radius: 50%;
  opacity: .25;
}
div:nth-child(2) {
  -webkit-box-shadow: 0 0 45vmax 45vmax #ff00ff;
  box-shadow: 0 0 45vmax 45vmax #ff00ff;
  -webkit-animation: hue 10s 0s linear infinite, move1 19s 0s linear infinite;
  animation: hue 10s 0s linear infinite, move1 19s 0s linear infinite;
}
div:nth-child(3) {
  -webkit-box-shadow: 0 0 45vmax 45vmax #ffffff;
  box-shadow: 0 0 45vmax 45vmax #ffffff;
  -webkit-animation: hue 15s 0s linear infinite, move2 25s 0s linear infinite;
  animation: hue 15s 0s linear infinite, move2 25s 0s linear infinite;
}
div:nth-child(4) {
  -webkit-box-shadow: 0 0 45vmax 45vmax #00ffff;
  box-shadow: 0 0 45vmax 45vmax #00ffff;
  -webkit-animation: hue 20s 0s linear infinite, move3 15s 0s linear infinite;
  animation: hue 20s 0s linear infinite, move3 15s 0s linear infinite;
  opacity: .2;
}
@-webkit-keyframes 
hue { 0% {
 -webkit-filter: hue-rotate(0deg);
 filter: hue-rotate(0deg);
}
 100% {
 -webkit-filter: hue-rotate(360deg);
 filter: hue-rotate(360deg);
}
}
@keyframes 
hue { 0% {
 -webkit-filter: hue-rotate(0deg);
 filter: hue-rotate(0deg);
}
 100% {
 -webkit-filter: hue-rotate(360deg);
 filter: hue-rotate(360deg);
}
}
@-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;
}
}

See Also:

You Might Be Interested In:

One thought on “Animated Gradient Background with Pure CSS”

  1. Fёdor

    Too rough animation (borders are visible) – how to change it and do more smooth?

    Reply ↓

Leave a Reply