How to set font color gradient in css

How to set font color gradient in css: 1. Use "background-cli" and "text-fill-color" to achieve font color gradient; 2. Use "mask-imag" to set font color gradient; 3. Use "linearGradient, fill" to set the font color gradient.

The operating environment of this article: windows7 system, CSS3 version, DELL G3 computer

Three methods of realizing text color gradient in css

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 gradients. 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; }

Description:

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 The value can be an image path or a gradient color.

The third method, use linearGradient, fill:

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

Explanation:

In SVG, there are two main gradients Type
:
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:

          
  
 
 
 
方法1. background-clip + text-fill-color
 
 
 
花样年华
 
 
 
 
 
方法2. mask-image
 
 
 
豆蔻年华
 
 
 
 
 
方法3. svg linearGradient
 
 
  
 
 
  

Effect:

Recommended learning: "css video tutorial》

The above is the detailed content of How to set font color gradient in css. For more information, please follow other related articles on the PHP Chinese website!