Example of how CSS implements text color gradient

Preface

Mainly use three CSS attributes:

1. linear-gradient() Images used to achieve gradients

2. background-clip Specifies the background image of the objectarea to be clipped outward

3. ##text-fill-color Specify the fill color of the text

Example

      background: linear-gradient(to bottom,#fff 0%,#333 100%);
      background-clip: text;
      -webkit-background-clip: text;
      text-fill-color: transparent;
      -webkit-text-fill-color: transparent;

Linear-gradient() can specify the gradient angle and color. In the example, the color transformation is from top to bottom

Background-clip:text has the shape of the text as Cropping area

Text-fill-color:transparent The fill color of the text is transparent

The effect is as follows:

　

　　

Compatibility

Both chrome and newer versions of firefox support the background-clip and text-fill-color properties, and the -webkit- prefix is ​​required

IE both The text value of the background-clip attribute is not supported

The above is the detailed content of Example of how CSS implements text color gradient. For more information, please follow other related articles on the PHP Chinese website!