Several methods to achieve text color gradient in css

(Recommended tutorial:CSS video tutorial)

In the process of web front-end development, UI designers often design some with gradient text Design drawings. In the past, we could only use png pictures to replace text. Today, we can use pure CSS to realize 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, usebackground-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(...)Provide a gradient background for text elements.

• webkit-text-fill-color: transparentFill text with a transparent color.

• webkit-background-clip: textClip the background with text and fill the text with the gradient background as color.

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

Note:

mask-imageis the same asbackground-image. The value can be not only the image path, but also the gradient color.

The third method, uselinearGradient,fill:

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

Description:

In SVG, there are two main types of gradients:

• 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:

For more programming-related knowledge, please visit:

Introduction to Programming! !

The above is the detailed content of Several methods to achieve text color gradient in css. For more information, please follow other related articles on the PHP Chinese website!