Three ways to implement css text color gradient (with code)

This article brings you three implementation methods of css text color gradient (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

In the process of web front-end development, UI designers often design some design drawings with gradient text. In the past, we could only use png pictures to replace text. Today, we can use pure CSS to implement gradient text. . Here are 3 implementation methods for your reference!

Basic style:

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

The first method, use 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; 
}

Instructions:

background: - webkit-linear-gradient(...) provides a gradient background for text elements.
webkit-text-fill-color: transparent Fill text with transparent color.
webkit-background-clip: text Clips the background with text and fills the text with the gradient background as color.

The second method is to use 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)));
}

Instructions:

mask-image is the same as background-image. Not only can the value be the image path, but also It's a gradient color.

The third method, use linearGradient, fill:

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

<svg>
    <defs>
        <lineargradient>
            <stop></stop>
            <stop></stop>
            <stop></stop>
        </lineargradient>
    </defs>
    <text>花信年华</text>
</svg>

Explanation:

In SVG, there are two main gradient types:

Linear Gradient (linearGradient)
Radial Gradient (radialGradient)
Gradient in SVG can be used not only to fill graphic elements, but also to fill text elements

dom example:

nbsp;html>


    <meta>
    <meta>
    <title>CSS3渐变字体</title>
    <link>
    <script></script>
    <script></script>
    <style>
        *{margin:0;padding:0;}
        body,html{width:100%;height:100%;}
        .wrapper{width:80%;margin:0 auto;margin-top:30px;}
        .gradient-text{text-align: left;text-indent:30px;line-height: 50px;font-size:40px;font-weight:bolder; position: relative; }
        .gradient-text-one{  
            background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow); 
            -webkit-background-clip:text; 
            -webkit-text-fill-color:transparent; 
        }
        .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)));
        }
        .gradient-text-three{
            fill:url(#SVGID_1_);
            font-size:40px;
            font-weight:bolder;
        }
    </style>


    <section>
        <p>
            </p>
<p>
                </p>
<h3 id="方法-background-clip-text-fill-color">方法1. background-clip + text-fill-color</h3>
            
            <p>
                </p>
<h3 id="花样年华">花样年华</h3>
            
        
        <p>
            </p>
<p>
                </p>
<h3 id="方法-mask-image">方法2. mask-image</h3>
            
            <p>
                </p>
<h3 id="豆蔻年华">豆蔻年华</h3>
            
        
        <p>
            
            </p>
<p>
                </p>
<h3 id="方法-svg-linearGradient">方法3. svg linearGradient</h3>
            
 
            <p>
                <svg>
                    <defs>
                        <lineargradient>
                            <stop></stop>
                            <stop></stop>
                            <stop></stop>
                        </lineargradient>
                    </defs>
                    <text>花信年华</text>
                </svg>
            </p>
 
        
    </section>

The above is the detailed content of Three ways to implement css text color gradient (with code). For more information, please follow other related articles on the PHP Chinese website!