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

SQL IDENTITY_INSERT case study

Generally speaking, once a column in a data table...

React concurrent function experience (front-end concurrent mode)

React is an open-source JavaScript library used b...

MySQL partitions existing tables in the data table

Table of contents How to operate Operation proces...

How does the MySQL database implement the XA specification?

MySQL consistency log What happens to uncommitted...

Use tomcat to deploy SpringBoot war package in centos environment

Prepare war package 1. Prepare the existing Sprin...

Detailed explanation of nodejs built-in modules

Table of contents Overview 1. Path module 2. Unti...

Tutorial on installing and uninstalling python3 under Centos7

1. Install Python 3 1. Install dependency package...

Detailed explanation of the use of DockerHub image repository

Previously, the images we used were all pulled fr...

HTML table tag tutorial (7): background color attribute BGCOLOR

The background color of the table can be set thro...

Causes and solutions for slow MySQL queries

There are many reasons for slow query speed, the ...

Solution to Linux QT Kit missing and Version empty problem

Currently encountering such a problem My situatio...

A complete tutorial on installing Ubuntu 20.04 using VMware virtual machine

Ubuntu is a relatively popular Linux desktop syst...

mysql-8.0.17-winx64 deployment method

1. Download mysql-8.0.17-winx64 from the official...

Notes on the MySQL database backup process

Today I looked at some things related to data bac...

Problems with join queries and subqueries in MySQL

Table of contents Basic syntax for multi-table jo...