<span class="rainbow-text ">RAINBOW</span>

<span class="rainbow-text gradient">RAINBOW</span>

<footer>inspired by <a href="https://www.mockofun.com/template/rainbow-font-generator/">Rainbow Text Generator</a> <br/>
original article <a href="https://www.coding-dude.com/wp/css/css-rainbow-text/">CSS Rainbow Text</a></footer>

.rainbow-text {
background: url(https://cdn.textures4photoshop.com/tex/thumbs/rainbow-pattern-thumb15.jpg);
background-size:cover;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 15vw;
font-family:sans-serif;
font-weight: bold;
text-align: center;
display:inline!important;
  text-align:center;
  display:block;
}


.rainbow-text.gradient{
  background-image: url(https://cdn.textures4photoshop.com/tex/thumbs/rainbow-gradient-2391.jpg);
}

footer{
  position:absolute;
  bottom:0;
  right:0;
  padding:0.5em;
  font-family:sans-serif;
}
footer a{
  font-weight:bold;
}