How to implement text gradient in css3? Three ways to implement text gradient in css3 (code)

The content of this article is about how to implement text gradient in CSS3? The three methods (codes) for realizing text gradient in CSS3 have certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

During the development process, UI designers often design some design drawings with gradient text and give them to us programmers, and most of us programmers sigh silently. However, the birth of CSS3 has solved many problems in the front-end development process, such as animation, masking, etc.

1. What we want to achieve today is to use pure CSS to implement gradient text. Here is the preview picture:

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 , 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; 
}

4. The second method, 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)));
}

5. The third method, use linearGradient, fill:

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

6. The entire code of this DEMO:

    
    
    
    
    
    
    


    

        

            

                
方法1. background-clip + text-fill-color
            
            

                
花样年华
            
        
        

            

                
方法2. mask-image
            
            

                
豆蔻年华
            
        
        

            
            

                
方法3. svg linearGradient
            
 
            

                
            
 
        
    

Related recommendations:

css progress bar text gradient according to progress

DIV CSS JS implemented text color gradient (reprint)_html/css_WEB-ITnose

##css3 text gradient animation

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