Several methods to achieve text color gradient in css
Dec 18, 2020 am 09:31 AM(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; }
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; }
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))); }
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; }
<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>
Description:
In SVG, there are two main types of gradients:- Linear Gradient (linearGradient)
- Radial Gradient (radialGradient)
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>
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!

Hot Article

Hot tools Tags

Hot Article

Hot Article Tags

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

What language is the browser plug-in written in?
