Three ways to implement text color gradient in CSS

Three ways to implement text color gradient in CSS

In the process of web front-end development, UI designers often design some designs with gradient text. In the past, we could only use png pictures to replace text. Today, we can use pure CSS to achieve 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 uses background-cli and text-fill-color:

.gradient-text-one{  
    background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow); 
    -webkit-background-clip:text; 
    -webkit-text-fill-color:transparent; 
}

illustrate:

background: -webkit-linear-gradient(…) provides a gradient background for text elements.

webkit-text-fill-color: transparent Fill the text with a transparent color.

webkit-background-clip: text Clip the background with the text, filling the text with the gradient background as color.

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

illustrate:

Like background-image, mask-image can be a picture path or a gradient color.

The third method uses linearGradient and fill:

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

<svg viewBoxs="0 0 500 300" class="svgBox">
    <defs>
        <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="10" x2="0" y2="50">
            <stop offset="0" style="stop-color:yellow"/>
            <stop offset="0.5" style="stop-color:#fd8403"/>
            <stop offset="1" style="stop-color:red"/>
        </linearGradient>
    </defs>
    <text text-anchor="middle" class="gradient-text-three" x="110px" y="30%">Flower Years</text>
</svg>

illustrate:

In SVG, there are two main types of gradients:

Linear Gradient

radialGradient

Gradients in SVG can be used not only to fill graphic elements, but also to fill text elements.

DOM example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>CSS3 gradient font</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style type="text/css">
        *{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: bold;
        }
    </style>
</head>
<body>
    <section class="wrapper">
        <div class="panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">Method 1. background-clip + text-fill-color</h3>
            </div>
            <div class="panel-body">
                <h3 class="gradient-text gradient-text-one">In the Mood for Love</h3>
            </div>
        </div>
        <div class="panel panel-warning">
            <div class="panel-heading">
                <h3 class="panel-title">Method 2. Mask-image</h3>
            </div>
            <div class="panel-body">
                <h3 class="gradient-text gradient-text-two" data-content="The Year of Young Girls">The Year of Young Girls</h3>
            </div>
        </div>
        <div class="panel panel-danger">
            
            <div class="panel-heading">
                <h3 class="panel-title">Method 3. svg linearGradient</h3>
            </div>
 
            <div class="panel-body">
                <svg viewBoxs="0 0 500 300" class="svgBox">
                    <defs>
                        <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="10" x2="0" y2="50">
                            <stop offset="0" style="stop-color:yellow"/>
                            <stop offset="0.5" style="stop-color:#fd8403"/>
                            <stop offset="1" style="stop-color:red"/>
                        </linearGradient>
                    </defs>
                    <text text-anchor="middle" class="gradient-text-three" x="110px" y="30%">Flower Years</text>
                </svg>
            </div>
 
        </div>
    </section>
</body>
</html>

Effect:

Summarize

The above are three methods of implementing text color gradient in CSS that I introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!

<<:  Tips for making HTML emails that can be displayed normally in mainstream mailboxes

>>:  How to set the default value of a MySQL field

Recommend

Nginx Location Configuration Tutorial from Scratch

Basics The matching order of location is "ma...

Share 20 JavaScript one-line codes

Table of contents 1. Get the value of browser coo...

MySQL statement arrangement and summary introduction

SQL (Structured Query Language) statement, that i...

CSS and HTML and front-end technology layer diagram

Front-end technology layer (The picture is a bit e...

CSS3 achieves infinite scrolling/carousel effect of list

Effect Preview Ideas Scroll the current list to t...

When MySQL is upgraded to 5.7, WordPress reports error 1067 when importing data

I recently upgraded MySQL to 5.7, and WordPress r...

JavaScript implements displaying a drop-down box when the mouse passes over it

This article shares the specific code of JavaScri...

Tutorial on customizing rpm packages and building yum repositories for Centos

1 Keep the rpm package downloaded when yum instal...

Detailed example of sorting function field() in MySQL

Preface In our daily development process, sorting...

The whole process of installing and configuring Harbor1.7 on CentOS7.5

1. Download the required packages wget -P /usr/lo...

MySQL 5.7.18 download and installation process detailed instructions

MySql Download 1. Open the official website and f...

Comprehensive understanding of line-height and vertical-align

Previous words Line-height, font-size, and vertica...

Solution to MySQL garbled code problem under Linux

The project interacts with the server, accesses t...

Detailed explanation of the six common constraint types in MySQL

Table of contents Preface 1.notnull 2. unique 3. ...