CSS3 How do I achieve text gradients? CSS3 three ways to implement text gradients (code)

This article brings you to the content is about CSS3 how to achieve text gradient? CSS3 realize the text gradient of three methods (code), there is a certain reference value, the need for friends can refer to, I hope to help you.

In the development process, the UI designer will often design some with the gradient text of the design, to our programmers, and our programmers, most of them are silently sigh, but the birth of CSS3, solve the front-end development process of a lot of problems, such as animation, masks and so on

1. What we want to achieve today is to use pure CSS to implement the gradient text, the following is the preview image:

2. Basic style:

. gradient-text{              Text-align:left;              text-indent:30px;              line-height:50px;              font-size:40px;              Font-weight:bolder;               position:relative;               }

3. The first method, using BACKGROUND-CLI, Text-fill-color:

. gradient-text-one{      background-image:-webkit-linear-gradient (bottom,red, #fd8403, yellow);     -webkit-background-clip:text;     -webkit-text-fill-color:transparent; }

4. The second method, using Mask-image:

. gradient-text-two{   color:red;}. gradient-text-two[data-content]::after{    content:attr (data-content);    Display:block;    Position:absolute;    Color:yellow;    left:0;    top:0;    Z-index:2;    -webkit-mask-image:-webkit-gradient (linear, 0 0, 0 bottom, from (yellow), to (RGBA (0, 0, 255, 0)));}

5. The third method, using LinearGradient, fill:

. gradient-text-three{    Fill:url (#SVGID_1_);    font-size:40px;    Font-weight:bolder;}

<svg viewboxs= "0 0" class= "Svgbox" >    <defs> <lineargradient id=        "svgid_1_" gradientunits = "Userspaceonuse" x1= "0" y1= "x2=" 0 "y2=" >            <stop  offset= "0" style= "stop-color:yellow"/>            <stop  offset= "0.5" style= "Stop-color: #fd8403"/>            <stop  offset= "1" style= "stop-color:red"/ >        </linearGradient>    </defs>    <text text-anchor= "Middle" class= "gradient-text-three "x=" 110px "y=" 30% "> Florescence </text></svg>

6. All the demo code:

<! DOCTYPE html>