<div class="box"></div>
<div class="box" style="background:radial-gradient(red var(--p),blue)"></div>
<div class="box" style="background:conic-gradient(red var(--a),blue)"></div>
<div class="box" style="background:linear-gradient(45deg,red  var(--l),blue,red calc(100% - var(--l)))"></div>
@property --p {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 10%;
}
@property --l {
  syntax: '<length>';
  inherits: false;
  initial-value: 10px;
}
@property --a {
  syntax: '<angle>';
  inherits: false;
  initial-value: 10deg;
}

.box {
  /*  needed for firefox to have a valid output */
  --p:10%;
  --l:10px;
  --a:10deg;
  /**/
  cursor:pointer;
  width:250px;
  height:200px;
  margin:15px;
  display:inline-block;
  transition:--p 0.5s,--l 0.5s,--a 0.5s;
  background:linear-gradient(red var(--p),blue);
}
.box:hover {
  --p:80%;
  --l:80px;
  --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.