How CSS implements an instance of a text color gradient

Objective

The main use of the three CSS properties:

1. Linear-gradient () the image used to implement the gradient

2. Background-clip the area to which the background image of the specified object is cropped out

3. text-fill-color The fill color of the specified text

Instance

      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, which is the color transform from top to bottom in the example

Background-clip:text the shape of the text as a clipping area

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

The effect is as follows:

　　

　　　　

Compatibility

Chrome and newer versions of Firefox support Background-clip and Text-fill-color attributes, with-webkit-prefixes

IE does not support the text value of the Background-clip property