<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>

.multicolor-1 {
  padding: 10px;
  z-index: 0;
  transition: .4s;
}
.multicolor-1:hover {
  color: #fff;
}
.multicolor-1:before,
.multicolor-1:after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0;
  background: repeating-linear-gradient(135deg,#0000 0 15px,#CCAC95 0 30px,#0000 0 45px,#748B83 0 60px);
  transform: translate(-40px,40px);
  transition: inherit;
}
.multicolor-1:after {
  background: repeating-linear-gradient(135deg,#9D7E79 0 15px,#0000 0 30px,#9A947C 0 45px,#0000 0 60px);
  transform: translate(40px,-40px);
}
.multicolor-1:hover:before,
.multicolor-1:hover:after {
  opacity: 1;
  transform: translate(0,0);
}


.multicolor-2 {
  padding: 10px;
  z-index: 0;
  transition: .4s;
}
.multicolor-2:hover {
  color: #fff;
}
.multicolor-2:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  -webkit-mask: linear-gradient(90deg,#000 40%,#0000 60%) right/250% 100%;
  background: repeating-linear-gradient(45deg,#2B4E72 0 15px,#2790B0 0 30px,#94BA65 0 45px);
  transition: inherit;
}
.multicolor-2:hover:before {
  -webkit-mask-position: left;
}


.multicolor-3 {
  padding: 10px;
  font-weight: bold;
  color: transparent;
  background: repeating-linear-gradient(135deg,#AAFF00 0 15px,#FFAA00 0 30px,#FF00AA 0 45px) right/0 100% no-repeat #000;
  -webkit-background-clip: text;
  background-clip: text;
  transition: .4s;
}
.multicolor-3:hover {
  background-size: 100% 100%;
}
.multicolor-3:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  clip-path: inset(0 100% 0 0);
  background: repeating-linear-gradient(135deg,#0B8185 0 15px,#1F5F61 0 30px,#36544F 0 45px);
  transition: inherit;
}
.multicolor-3:hover:before {
  clip-path: inset(0 0 0 0);
}

.multicolor-4 {
  padding: 10px;
  z-index: 0;
  transition: .4s;
}
.multicolor-4:hover {
  color: #fff;
}
.multicolor-4:before{
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  clip-path: inset(0 50%);
  --c: #66245B 0 15px,#616382 0 30px,#69A5A4 0 45px;
  background: 
    repeating-linear-gradient(  45deg, var(--c)) 100% 0,
    repeating-linear-gradient( -45deg, var(--c)) 0    0,
    repeating-linear-gradient( 135deg, var(--c)) 100% 100%,
    repeating-linear-gradient(-135deg, var(--c)) 0    100%;
  background-size: 50.1% 50.1%;
  background-repeat: no-repeat;
  transition: inherit;
}
.multicolor-4:hover:before {
  clip-path: inset(0);
}


.multicolor-5 {
  padding: 0 10px;
  line-height: 1.6em;
  z-index: 0;
  transition: .4s linear;
}
.multicolor-5:hover {
  color: #fff;
}
.multicolor-5:before,
.multicolor-5:after{
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  clip-path: inset(0 100% 0 0);
  background:conic-gradient(from var(--d,30deg), #4d567f 25%, #00264f 0 50%,#8b1f4f 0 75%,#570025 0) 0 0/.8em .8em;
  -webkit-mask:repeating-conic-gradient(from var(--c,0deg),#000 0 25%,#0000 0 50%) 0 0/1.6em 1.6em;
  transition: inherit;
}
.multicolor-5:after{
  clip-path: inset(0 0 0 100%);
  --d:-120deg;
  --c: 90deg;
}
.multicolor-5:hover:before,
.multicolor-5:hover:after {
  clip-path: inset(0);
}


.multicolor-6 {
  --s: 1.067em;
  padding:0 10px;
  line-height: 1.6em;
  background: 
    conic-gradient(from 120deg at top,#1F1F20 120deg,#0000 0),
    conic-gradient(from 120deg at top,#2B4C7E 120deg,#0000 0),
    conic-gradient(from 120deg at top,#567EBB 120deg,#0000 0),
    conic-gradient(from 120deg at top,#849cbf 120deg,#0000 0);
  background-repeat: repeat-x;
  background-size: calc(var(--s)/0.577) var(--s);
  background-position: 50% calc(100% + var(--s));
  transition: .4s linear;
}
.multicolor-6:hover {
  color: #fff;
  background-position: 
    50% calc(100% + var(--s)/2),
    50% calc(100% + 0px),
    50% calc(100% - var(--s)/2),
    50% calc(100% - var(--s));
}  

/**/
[class] {
  display:inline-block;
  font-size:40px;
  font-family:sans-serif;
  margin:25px;
  cursor:pointer;
  position: relative;
}
[class]:before,
[class]:after {
  pointer-events: none;
}

body {
  text-align:center;
}