<div class="multicolor-1">1. Hover me </div>
<div class="multicolor-2">2. Hover me </div>
<div class="multicolor-3">3. Hover me </div>
<div class="multicolor-4">4. Hover me </div>
<div class="multicolor-5">5. Hover me </div>
<div class="multicolor-6">6. Hover me </div>
<div class="multicolor-7">7. Hover me </div>
<div class="multicolor-8">8. Hover me </div>

@property --g1{
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}
@property --g2{
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}
@property --g3{
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}
@property --g4{
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

.multicolor-1 {
  padding:10px;    
  background:
    radial-gradient(circle calc(var(--g4)*1px) at 0% 80%,#25b09b 98%,#0000 ),
    radial-gradient(circle calc(var(--g3)*1px) at 30% 20%,#f03355 98%,#0000 ),
    radial-gradient(circle calc(var(--g2)*1px) at 100% 100%,#ffa516  98%,#0000 ),
    radial-gradient(circle calc(var(--g1)*1px) at 50% 60%,#514b82 98%,#0000 );
  transition:--g1 .3s,--g2 .3s,--g3 .3s,--g4 .3s,color .3s;
}

.multicolor-1:hover {
  color:#fff;
  --g1:200;
  --g2:80;
  --g3:20;
  --g4:25;
  transition:--g1 .4s,--g2 .3s .2s,--g3 .2s .3s,--g4 .4s .2s,color .3s ;
}

.multicolor-2 {
  padding:10px;    
  background:
    linear-gradient(135deg,#25b09b calc(var(--g4)*1%),#0000 0),
    linear-gradient(60deg,#f03355 calc(var(--g3)*1%),#0000 0),
    linear-gradient(-45deg,#ffa516 calc(var(--g2)*1%),#0000 0),
    linear-gradient(0deg,#514b82 calc(var(--g1)*1%),#0000 0);
  transition:--g1 .3s,--g2 .3s,--g3 .3s,--g4 .3s,color .3s;
}

.multicolor-2:hover {
  color:#fff;
  --g1:100;
  --g2:30;
  --g3:20;
  --g4:25;
  transition:--g1 .4s,--g2 .3s .2s,--g3 .2s .3s,--g4 .4s .2s,color .3s ;
}

.multicolor-3 {
  padding:10px;    
  background:
    conic-gradient(from 30deg,
      rgb(81 75 130  / calc(var(--g1)*1%)) 1deg   100deg,
      rgb(255 165 22 / calc(var(--g2)*1%)) 101deg 160deg,
      rgb(240 51 85  / calc(var(--g3)*1%)) 161deg 250deg,
      rgb(37 176 155 / calc(var(--g4)*1%)) 251deg);
  transition:--g1 .4s,--g2 .3s .1s,--g3 .2s .2s,--g4 .3s .1s,color .4s;
}

.multicolor-3:hover {
  color:#fff;
  --g1:100;
  --g2:100;
  --g3:100;
  --g4:100;
}

.multicolor-4 {
  padding:10px;    
  background:
    conic-gradient(from 30deg at 50% 60%,
      rgb(81 75 130  / calc(var(--g1)*1%)) 1deg   100deg,
      rgb(255 165 22 / calc(var(--g2)*1%)) 101deg 160deg,
      rgb(240 51 85  / calc(var(--g3)*1%)) 161deg 250deg,
      rgb(37 176 155 / calc(var(--g4)*1%)) 251deg) left,
    conic-gradient(from -107deg at 40% 20%,
      rgb(81 75 130  / calc(var(--g1)*1%)) 1deg   41deg,
      rgb(255 165 22 / calc(var(--g2)*1%)) 41deg 150deg,
      rgb(240 51 85  / calc(var(--g3)*1%)) 151deg 245deg,
      rgb(37 176 155 / calc(var(--g4)*1%)) 221deg) center,
    conic-gradient(from 80deg at 60% 80%,
      rgb(81 75 130  / calc(var(--g1)*1%)) 1deg   100deg,
      rgb(255 165 22 / calc(var(--g2)*1%)) 101deg 160deg,
      rgb(240 51 85  / calc(var(--g3)*1%)) 161deg 250deg,
      rgb(37 176 155 / calc(var(--g4)*1%)) 251deg) right;
  background-size:33.33% 100%;
  background-repeat: no-repeat;
  transition:--g1 .4s,--g2 .3s .1s,--g3 .2s .2s,--g4 .3s .1s,color .4s;
}

.multicolor-4:hover {
  color:#fff;
  --g1:100;
  --g2:100;
  --g3:100;
  --g4:100;
}

.multicolor-5 {
  padding:10px;    
  background:
    repeating-radial-gradient(circle at bottom,
      rgb(81 75 130  / calc(var(--g1)*1%)) 0 20%,
      rgb(255 165 22 / calc(var(--g2)*1%)) 0 40%,
      rgb(240 51 85  / calc(var(--g3)*1%)) 0 60%,
      rgb(37 176 155 / calc(var(--g4)*1%)) 0 80%);
  transition:--g1 .4s,--g2 .3s .1s,--g3 .2s .2s,--g4 .3s .1s,color .4s;
}

.multicolor-5:hover {
  color:#fff;
  --g1:100;
  --g2:100;
  --g3:100;
  --g4:100;
}

.multicolor-6 {
  padding:10px;   
  --g1:0;
  --g2:10;
  --g3:20;
  --g4:30; 
  background:
    repeating-radial-gradient(circle,
      rgb(81 75 130 ) 0                  calc(var(--g1)*1%),
      #0000           calc(var(--g1)*1%) 10%,
      rgb(255 165 22) calc(var(--g1)*1%) calc(var(--g2)*1%),
      #0000           calc(var(--g2)*1%) 20%,
      rgb(240 51 85 ) calc(var(--g2)*1%) calc(var(--g3)*1%),
      #0000           calc(var(--g3)*1%) 30%,
      rgb(37 176 155) calc(var(--g3)*1%) calc(var(--g4)*1%),
      #0000           calc(var(--g4)*1%) 40%);
  transition:--g1 .3s,--g2 .3s,--g3 .3s,--g4 .3s,color .3s;
}

.multicolor-6:hover {
  color:#fff;
  --g1:10;
  --g2:20;
  --g3:30;
  --g4:40;
}

.multicolor-7 {
  padding:10px;    
  background:
    conic-gradient(from calc(var(--g1)*1deg - 180deg) at left,
      rgb(81 75 130  ) 1deg   70deg,
      rgb(255 165 22 ) 71deg  90deg,
      rgb(240 51 85  ) 91deg  110deg,
      rgb(37 176 155 ) 111deg 180deg,
      #0000 181deg);
  transition:--g1 .4s,color .4s;
}

.multicolor-7:hover {
  color:#fff;
  --g1:180;
}

.multicolor-8 {
  padding:10px;
  --d:-10px;
  background:
    conic-gradient(from -45deg,rgb(81 75 130  / calc(var(--g1)*1%)) 0 90deg,#0000 0) calc(50% + 10px) calc(50% - var(--d))/40px 200%,
    conic-gradient(from 135deg,rgb(255 165 22 / calc(var(--g2)*1%)) 0 90deg,#0000 0) calc(50% - 10px) calc(50% + var(--d))/40px 200%,
    linear-gradient(45deg, rgb(240 51 85 / calc(var(--g3)*1%) )  50%, rgb(37 176 155 / calc(var(--g4)*1%)) 50.1%);
  transition: --g1 .2s .3s, --g2 .2s .3s,--g3 0s .2s,--g4 0s .2s,color .2s .2s,background-position .3s;
}

.multicolor-8:hover {
  color:#fff;
  --g1:100;
  --g2:100;
  --g3:100;
  --g4:100;
  --d:10px;
  transition: --g1 .3s, --g2 .3s,--g3 0s .3s,--g4 0s .3s,color .3s,background-position .3s .3s;
} 
/**/
[class] {
  display:inline-block;
  font-size:40px;
  font-family:sans-serif;
  margin:25px;
  cursor:pointer;
}

body {
  text-align:center;
}