<div class="element"></div>

body {
  font-family: sans-serif;
  height: 100vh;
  display: grid;
  place-items: center;
  background: #f5b4a5;
}
.element{
  --brandingColor: #5f64e2;
  width: 20rem;
  height: 20rem;
	background: linear-gradient(90deg, #5055cf 0%, var(--brandingColor) 100%);
  transition: --brandingColor 800ms ease-in-out;
  border-radius: 4rem;
}

.element:hover{
	--brandingColor: #3d419f;
}

CSS.registerProperty({ 
  name: "--brandingColor",
  syntax: "<color>", 
  inherits: false,
  initialValue: "#5f64e2",
});