Shulou(Shulou.com)06/01 Report--

Editor to share with you how to achieve CSS3 text color gradient, I believe that most people do not know much, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Add a color gradient to the text

This is a background color that sets the gradient to the text. Currently, the supported browser is GoogleChrome,Safari,Opera.

HTML

Hello,

HTML lists the text to be graded as is.

CSS

H2 {

Color:#ACB6E5

Background:-webkit-linear-gradient (90deggin ACB6E5meme 86FDE8)

-webkit-background-clip:text

-webkit-text-fill-color:transparent

}

You can also change the position of the color by specifying the angle of the gradient to make it a bit rough.

CSS

H2 {

Color:#FF7C00

Background:-webkit-linear-gradient (top,#FFB76B0%,#FFA73D50%,#FF7C0051%,#FF7F04100%)

-webkit-background-clip:text

-webkit-text-fill-color:transparent

}

Fill the color of the text with an image

In addition to setting the gradient as the background color, you can also use the image to set the font color.

Let's use this picture to color the background.

Keiskei.jpg

The code is as follows:

H2 {

Color:#333

Background:url ("image/keiskei.jpg")

-webkit-background-clip:text

-webkit-text-fill-color:transparent

}

Hello, PHP Chinese website

The above is all the content of the article "how to realize the gradual change of text color in CSS3". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.