Property Test

@property --angle-offset {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: true;
}
 
@property --stop {
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: true;
}
 
.rgb-gradient {
  width: 300px;
  height: 300px;
  border: solid 2px;
  background: linear-gradient(calc(217deg + var(--angle-offset)), rgba(255,0,0,.8), rgba(255,0,0,0) var(--stop)),
              linear-gradient(calc(127deg + var(--angle-offset)), rgba(0,255,0,.8), rgba(0,255,0,0) var(--stop)),
              linear-gradient(calc(336deg + var(--angle-offset)), rgba(0,0,255,.8), rgba(0,0,255,0) var(--stop));
  transition: --angle-offset 1s, --stop 1s;
}
 
.rgb-gradient:hover {
  --angle-offset: 180deg;
  --stop: 70.71%;
}