Multi-colored text in CSS

That's one for my bookmarks. 🙈 I just came across this beautiful Pen by Shireen Taj. Occasionally, I'm googling how to do this with multi-color text effect with CSS and this example is just beautiful!

The trick is that you can define a gradient on the elements background, set the text color to transparent and define background-clip: text.

h1 {
  /* more styling rules */
  
  /* define a fancy background */
  background: linear-gradient(219deg, 
    var(--color-1) 19%, 
    transparent 19%,transparent 20%, 
    var(--color-2) 20%, var(--color-2)  39%,
    transparent 39%,transparent 40%, 
    var(--color-3) 40%,var(--color-3) 59% ,
    transparent 59%,transparent 60%, 
    var(--color-4) 60%, var(--color-4) 79%,
    transparent 79%, transparent 80%, 
    var(--color-5) 80%);
  
  /* clip the background to the text */
  background-clip: text;
  -webkit-background-clip: text;
  
  /* make the text color transparent (and invisible) */
  color: transparent;
}

If you want to have a detailed look, check Shireen's CodePen. ☝️