<button>
  Animated Custom Properties
</button>
button {
  --stop-color: red;
  background-image: linear-gradient(var(--stop-color), black);
  transition: --stop-color 1s;
}

button:hover {
  --stop-color: green;
}

/* Helper Styling to make it all look better */
body {
  margin: 0;
  padding: 0;
}

button {
  height: 25vh;
  width: 100vw;
  color: white;
  font-size: 3em;
}

if ("registerProperty" in CSS) {
  CSS.registerProperty({
    name: "--stop-color",
    syntax: "<color>",
    inherits: false,
    initialValue: "blue"
  });
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.