<div class="box"></div>
<div class="box" style="background:conic-gradient(from var(--a), red var(--a),blue)"></div>
<div class="box" style="background:linear-gradient(calc(180deg - var(--a)),red  ,blue,red )"></div>
@property --a {
  syntax: '<angle>';
  inherits: false;
  initial-value: 10deg;
}

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

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.