CSS 文字渐变

风萧

HTML代码

1. <div class="gradient1">
   
2.   <span>渐变1 - 菜鸟工具</span>
   
3. </div>
   
4. <h2 class="text-gradient" data-text="渐变2 - 菜鸟工具">渐变2 - 菜鸟工具</h2>

复制代码

CSS 代码

1. .gradient1 span {
   
2.   background: linear-gradient(to right, red, blue);
   
3.   -webkit-background-clip: text;
   
4.   color: transparent;
   
5. }
   
6. .text-gradient {  
   
7.   display: inline-block;
   
8.   font-family: '微软雅黑';
   
9.   font-size: 2em;
   
10.   position: relative;
    
11. }  
    
12. 
    
13. .text-gradient[data-text]::after {  
    
14.   content: attr(data-text);  
    
15.   color: green;  
    
16.   position: absolute;  
    
17.   left: 0;  
    
18.   z-index: 2;
    
19.   -webkit-mask-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0)));
    
20. }

复制代码