<div class="box"></div>
<div class="box" style="background:radial-gradient(circle at var(--x) var(--y), red ,blue,red);" ></div>
@property --x{
  syntax: '<percentage>';
  inherits: false;
  initial-value: 10%;
}
@property --y{
  syntax: '<percentage>';
  inherits: false;
  initial-value: 10%;
}

.box {
  /*  needed for firefox to have a valid output */
  --x:10%;
  --y:10%;
  /**/
  cursor:pointer;
  width:250px;
  height:200px;
  margin:15px;
  display:inline-block;
  transition:--x 0.5s,--y 0.5s;
  background:conic-gradient(from 45deg at var(--x) var(--y), red ,blue,red);
}
.box:hover {
  --x:50%;
  --y:80%;
}

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.