<div class="box"></div>
<div class="box" style="background:radial-gradient(var(--c),blue)"></div>
<div class="box" style="background:conic-gradient(var(--c),blue,var(--c))"></div>
<div class="box" style="background:linear-gradient(45deg,var(--c),blue,var(--c))"></div>
@property --c {
  syntax: '<color>';
  inherits: false;
  initial-value: red;
}

.box {
  --c:red; /* needed for firefox to have a valid output */
  cursor:pointer;
  width:250px;
  height:200px;
  margin:15px;
  display:inline-block;
  transition:--c 0.5s;
  background:linear-gradient(var(--c),blue);
}
.box:hover {
  --c:green;
}

body {
  text-align:center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.