Table of Contents
方法1. background-clip + text-fill-color
花样年华
方法2. mask-image
豆蔻年华
方法3. svg linearGradient
Home Web Front-end CSS Tutorial Several methods to achieve text color gradient in css

Several methods to achieve text color gradient in css

Dec 18, 2020 am 09:31 AM
css

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;
}
Copy after login

The first method, use background-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; 
}
Copy after login

Description:

  • ##background: -webkit-linear-gradient(...) Provide a gradient background for text elements.

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

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

The second method, use 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)));
}
Copy after login

Note:

mask-image is the same as background-image. The value can be not only the image path, but also the gradient color.

The third method, use linearGradient, fill:

.gradient-text-three{
    fill:url(#SVGID_1_);
    font-size:40px;
    font-weight:bolder;
}
Copy after login
<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%">花信年华</text>
</svg>
Copy after login

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:

<!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渐变字体</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:bolder;
        }
    </style>
</head>
<body>
    <section class="wrapper">
        <div class="panel panel-info">
            <div class="panel-heading">
                <h3 id="方法-nbsp-background-clip-nbsp-nbsp-text-fill-color">方法1. background-clip + text-fill-color</h3>
            </div>
            <div class="panel-body">
                <h3 id="花样年华">花样年华</h3>
            </div>
        </div>
        <div class="panel panel-warning">
            <div class="panel-heading">
                <h3 id="方法-nbsp-mask-image">方法2. mask-image</h3>
            </div>
            <div class="panel-body">
                <h3 id="豆蔻年华">豆蔻年华</h3>
            </div>
        </div>
        <div class="panel panel-danger">
            
            <div class="panel-heading">
                <h3 id="方法-nbsp-svg-nbsp-linearGradient">方法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%">花信年华</text>
                </svg>
            </div>
 
        </div>
    </section>
</body>
</html>
Copy after login
Effect:

Several methods to achieve text color gradient in css

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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

What does placeholder mean in vue What does placeholder mean in vue May 07, 2024 am 09:57 AM

What does placeholder mean in vue

How to write spaces in vue How to write spaces in vue Apr 30, 2024 am 05:42 AM

How to write spaces in vue

How to get dom in vue How to get dom in vue Apr 30, 2024 am 05:36 AM

How to get dom in vue

What does span mean in js What does span mean in js May 06, 2024 am 11:42 AM

What does span mean in js

What does rem mean in js What does rem mean in js May 06, 2024 am 11:30 AM

What does rem mean in js

How to introduce images into vue How to introduce images into vue May 02, 2024 pm 10:48 PM

How to introduce images into vue

What is the function of span tag What is the function of span tag Apr 30, 2024 pm 01:54 PM

What is the function of span tag

What language is the browser plug-in written in? What language is the browser plug-in written in? May 08, 2024 pm 09:36 PM

What language is the browser plug-in written in?

See all articles