Using CSS3 to implement font color gradient

When using Animation.css, I found that the font of its official website would change gradually. I took a look at its css and it was very interesting.

  .site__title {
    color: #f35626;
    background-image: -webkit-linear-gradient(92deg, #f35626, #feab3a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: hue 60s infinite linear;
  }
@-webkit-keyframes hue {
    from {
      -webkit-filter: hue-rotate(0deg);
    }
    to {
      -webkit-filter: hue-rotate(-360deg);
    }
  }

Here we use -webkit-background-clip: text to crop the background image and leave only the text part.

Then use -webkit-text-fill-color: transparent to set the text fill color to transparent

Use hue animation to adjust the hue from 0deg to -360deg within 60s to achieve the effect of font color changing over time.

This is the end of this article about how to use CSS3 to implement font color gradient. For more relevant CSS3 font color gradient content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!