Animating a gradient

Registering a new property can make it animatable (if syntax type is animatable). It is defined in CSS Properties & Values API

Available in JS with CSS.registerProperty() and in CSS with @property

#el {
  --color-stop: deeppink;
  background: linear-gradient(white, var(--color-stop))
  transition: --color-stop 1s;
}
#el:hover {
  --color-stop: deepskyblue;
}

/* in CSS */
@property --color-stop {
  syntax: '<color>';
  inherits: false;
  initial-value: transparent;
}

/* or, in JS */
CSS.registerProperty({
  name: '--color-stop',
  syntax: '<color>',
  inherits: false,
  initialValue: 'transparent'
})