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

How to solve the problem of FileZilla_Server:425 Can't open data connection

When installing FileZilla Server on the server, t...

How to use VirtualBox to simulate a Linux cluster

1. Set up HOST on the host Macbook The previous d...

Detailed explanation of ES6 Promise usage

Table of contents What is a Promise? Usage of rej...

A brief discussion on Linux signal mechanism

Table of contents 1. Signal List 1.1. Real-time s...

Analysis of the problem of deploying vue project and configuring proxy in Nginx

1. Install and start nginx # Install nginx sudo a...

Solution to Vue's inability to watch array changes

Table of contents 1. Vue listener array 2. Situat...

Examples of using temporary tables in MySQL

I've been a little busy these two days, and t...

Four ways to create objects in JS

Table of contents 1. Create objects by literal va...

Detailed explanation of ensuring the consistency of MySQL views (with check option)

This article uses an example to illustrate how to...

Each time Docker starts a container, the IP and hosts specified operations

Preface Every time you use Docker to start a Hado...

The difference between MySQL database stored procedures and transactions

Transactions ensure the atomicity of multiple SQL...

MySQL password contains special characters & operation of logging in from command line

On the server, in order to quickly log in to the ...

mysql workbench installation and configuration tutorial under centOS

This article shares the MySQL Workbench installat...

Detailed explanation of basic data types in mysql8.0.19

mysql basic data types Overview of common MySQL d...

Install two MySQL5.6.35 databases under win10

Record the installation of two MySQL5.6.35 databa...