How to use CSS3 gradients to achieve text color gradients?

In recent web design, I feel that there are more and more designs containing gradients. This time, we will introduce how to apply CSS3 gradients to text, and introduce how to fill images onto text.

Apply a color gradient on text

This is a gradient color that is set to the background color of the text. Currently supported browsers are Google Chrome, Safari, and Opera. (Recommended Course: CSS3 Video Tutorial)

HTML

<h1 id="你好-PHP中文网">你好，PHP中文网</h1>

HTML lists the text to be gradient as is.

CSS

h1{
  color: #ACB6E5;
  background: -webkit-linear-gradient(90deg, #ACB6E5, #86FDE8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

The effect is as follows:

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

CSS

h1{
  color: #FF7C00;
  background: -webkit-linear-gradient(top, #FFB76B 0%, #FFA73D 50%, #FF7C00 51%, #FF7F04 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

The effect is as follows:

Use images to fill the text color

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

Let’s use this picture to set the color for the background

The code is as follows:

	
	


<h1 id="你好-PHP中文网">你好，PHP中文网</h1>

The effect is as follows:

The above is the detailed content of How to use CSS3 gradients to achieve text color gradients?. For more information, please follow other related articles on the PHP Chinese website!