Published at
Updated at
Reading time

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. ☝️

Was this snippet helpful?
Yes? Cool! You might want to check out Web Weekly for more snippets. The last edition went out 8 days ago.
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles