Animated Gradients

Animating gradients with color syntax custom property.

by Travis Almand

HTML

<div class="container background"></div>
<div class="container custom"></div>

SCSS

.container {
  height: 200px;
  margin: 20px auto;
  width: 75%;
}

.background {
  animation: 5s linear 0s infinite background;
  background: linear-gradient(to right, red 0%, green 50%, blue 100%);
}
@keyframes background {
  0% {
    background: linear-gradient(to right, red 0%, green 50%, blue 100%);
  }
  33% {
    background: linear-gradient(to right, green 0%, blue 50%, red 100%);
  }
  66% {
    background: linear-gradient(to right, blue 0%, red 50%, green 100%);
  }
}

.custom {
  animation: 5s linear 0s infinite both custom;
  background: linear-gradient(to right, var(--gradient1) 0%, var(--gradient2) 50%, var(--gradient3) 100%);
}
@keyframes custom {
  0% {
    --gradient1: red;
    --gradient2: green;
    --gradient3: blue;
  }
  33% {
    --gradient1: green;
    --gradient2: blue;
    --gradient3: red;
  }
  66% {
    --gradient1: blue;
    --gradient2: red;
    --gradient3: green;
  }
}

JavaScript

CSS.registerProperty({
	name: '--gradient1',
  syntax: '<color>',
  inherits: false,
  initialValue: 'red'
});
CSS.registerProperty({
	name: '--gradient2',
  syntax: '<color>',
  inherits: false,
  initialValue: 'green'
});
CSS.registerProperty({
	name: '--gradient3',
  syntax: '<color>',
  inherits: false,
  initialValue: 'blue'
});