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

MySQL sorting Chinese details and examples

Detailed explanation of MySQL sorting Chinese cha...

uniapp implements date and time picker

This article example shares the specific code of ...

Tips for implementing multiple borders in CSS

1. Multiple borders[1] Background: box-shadow, ou...

Detailed explanation of using backgroundImage to solve the image carousel switching

Implementing carousel with a single DOM node You ...

Example of implementing the Graphql interface in Vue

Note: This article is about the basic knowledge p...

Detailed explanation of the implementation example of group ranking in Mysql tutorial

Table of contents 1. Data Source 2. Overall ranki...

Win10 configuration tomcat environment variables tutorial diagram

Before configuration, we need to do the following...

An experienced person will show you how to develop a professional and standardized MySQL startup script

Every qualified Linux operation and maintenance p...

Detailed explanation of MySQL and Spring's autocommit

1 MySQL autocommit settings MySQL automatically c...

MySQL replication advantages and principles explained in detail

Replication is to transfer the DDL and DML operat...

Detailed explanation of the process of using Docker to build a PHP operating environment in CentOS7 environment

Related articles: Install Docker using yum under ...

A detailed discussion of MySQL deadlock and logs

Recently, several data anomalies have occurred in...

JavaScript to implement the web version of Gobang game

This article shares the specific code for JavaScr...

How to change MySQL character set utf8 to utf8mb4

For MySQL 5.5, if the character set is not set, t...

18 Amazing Connections Between Interaction Design and Psychology

Designers need to understand psychology reading n...