前端實(shí)現(xiàn)文字漸變的三種方式
更新時(shí)間：2025年07月07日 08:28:26 作者：飛天貓貓頭
這篇文章主要介紹了前端實(shí)現(xiàn)文字漸變的三種方式：CSS通過背景漸變與裁切實(shí)現(xiàn),Canvas利用createLinearGradient繪制,SVG通過定義漸變并應(yīng)用到文字,CSS最常用,其他兩種適用于特定場景,需要的朋友可以參考下
前言
最近開發(fā)的時(shí)候發(fā)現(xiàn)很多ui圖上面的標(biāo)題都是帶有漸變效果的，這里就記錄一下前端實(shí)現(xiàn)文字漸變的幾種方式。
完整效果如下
CSS 方式
通過給文字容器的背景設(shè)置漸變顏色，并使用background-clip屬性，將其以文字內(nèi)容進(jìn)行裁切。最后使用text-fill-color屬性，給文字設(shè)置透明填充來實(shí)現(xiàn)
| 屬性名稱 | 值 | 效果 |
|---|---|---|
| background | linear-gradient(to top, #b1495a, #c71a44) | 給文字容器設(shè)置漸變背景色 |
| background-clip | text | 背景被裁切成文字的前景色 |
| text-fill-color | transparent | 文字的填充顏色 |
效果如下
- 具體樣式代碼
.up-gradient {
background: linear-gradient(to top, #b1495a, #c71a44);
/* 背景被裁剪成文字的前景色。 */
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* 文字透明填充 */
text-fill-color: transparent;
}
.down-gradient {
background: linear-gradient(to bottom, #b1495a, #c71a44);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* 文字透明填充 */
text-fill-color: transparent;
}
.left-gradient {
background: linear-gradient(to left, #b1495a, #c71a44);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* 文字透明填充 */
text-fill-color: transparent;
}
.right-gradient {
background: linear-gradient(to right, #b1495a, #c71a44);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* 文字透明填充 */
text-fill-color: transparent;
}
/* 多顏色漸變 */
.multi-gradient {
background: linear-gradient(90deg, #b1495a 10%, #c71a44 50%, #ffb86c 80%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* 文字透明填充 */
text-fill-color: transparent;
}
html 結(jié)構(gòu)
<body>
<div class="container">
<h1>CSS實(shí)現(xiàn)文字漸變</h1>
<!-- css版本 -->
<article class="panel">
<div class="panel-box-title">CSS版:</div>
<div class="box">
<div class="content-text up-gradient">向上漸變</div>
<div class="content-text down-gradient">向下漸變</div>
<div class="content-text left-gradient">向左漸變</div>
<div class="content-text right-gradient">向右漸變</div>
<!-- 設(shè)置多個(gè)顏色 -->
<div class="content-text multi-gradient">多顏色漸變</div>
</div>
</article>
</div>
</body>
Canvas 方式
canvas中的文字漸變的實(shí)現(xiàn)方式就很簡單了，因?yàn)?code>canvas可以直接給文字設(shè)置漸變樣式。
主要用到createLinearGradient方法，用來創(chuàng)建一個(gè)線性漸變，addColorStop設(shè)置漸變的色標(biāo)，就像是這個(gè)效果
最后再用fillStyle指定使用我們創(chuàng)建的漸變對象即可
效果如下
核心代碼
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>文字漸變</title>
<link rel="stylesheet" href="index.css" rel="external nofollow" rel="external nofollow" />
</head>
<body>
<div class="container">
<!-- canvas版本 -->
<article class="panel">
<div class="panel-box-title">Canvas版:</div>
<div class="box">
<canvas id="canvas" height="180" width="900"></canvas>
</div>
</article>
</div>
</body>
<script>
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
ctx.font = '32px Arial'
// 從左到右的漸變文字
const leftToRightGradient = ctx.createLinearGradient(0, 0, canvas.width, 0)
leftToRightGradient.addColorStop(0, '#fff')
leftToRightGradient.addColorStop(1, '#000')
ctx.fillStyle = leftToRightGradient
ctx.fillText('Canvas 從左到右漸變', 20, 40)
// 從上到下的漸變文字
const topToBottomGradient = ctx.createLinearGradient(0, 0, 0, canvas.height)
topToBottomGradient.addColorStop(0, '#fff')
topToBottomGradient.addColorStop(1, '#000')
ctx.fillStyle = topToBottomGradient
ctx.fillText('Canvas 從上到下漸變', 20, 80)
// 從右到左的漸變文字
const rightToLeftGradient = ctx.createLinearGradient(canvas.width, 0, 0, 0)
rightToLeftGradient.addColorStop(0, '#fff')
rightToLeftGradient.addColorStop(1, '#000')
ctx.fillStyle = rightToLeftGradient
ctx.fillText('Canvas 從右到左漸變', 20, 120)
// 從下到上的漸變文字
const bottomToTopGradient = ctx.createLinearGradient(0, canvas.height, 0, 0)
bottomToTopGradient.addColorStop(0, '#fff')
bottomToTopGradient.addColorStop(1, '#000')
ctx.fillStyle = bottomToTopGradient
ctx.fillText('Canvas 從下到上漸變', 20, 160)
</script>
</html>
SVG 方式
SVG 文字漸變的核心原理是使用 SVG 的<linearGradient>定義漸變，然后通過fill="url(#gradientId)"將漸變應(yīng)用到文字上。
漸變效果如下
核心代碼如下
<svg width="900" height="180" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- 從左到右漸變 -->
<linearGradient
id="leftToRight"
x1="0%"
y1="0%"
x2="100%"
y2="0%"
>
<stop
offset="0%"
style="stop-color: #b1495a; stop-opacity: 1"
/>
<stop
offset="100%"
style="stop-color: #c71a44; stop-opacity: 1"
/>
</linearGradient>
<!-- 從上到下漸變 -->
<linearGradient
id="topToBottom"
x1="0%"
y1="0%"
x2="0%"
y2="100%"
>
<stop
offset="0%"
style="stop-color: #b1495a; stop-opacity: 1"
/>
<stop
offset="100%"
style="stop-color: #c71a44; stop-opacity: 1"
/>
</linearGradient>
<!-- 從右到左漸變 -->
<linearGradient
id="rightToLeft"
x1="100%"
y1="0%"
x2="0%"
y2="0%"
>
<stop
offset="0%"
style="stop-color: #b1495a; stop-opacity: 1"
/>
<stop
offset="100%"
style="stop-color: #c71a44; stop-opacity: 1"
/>
</linearGradient>
<!-- 從下到上漸變 -->
<linearGradient
id="bottomToTop"
x1="0%"
y1="100%"
x2="0%"
y2="0%"
>
<stop
offset="0%"
style="stop-color: #b1495a; stop-opacity: 1"
/>
<stop
offset="100%"
style="stop-color: #c71a44; stop-opacity: 1"
/>
</linearGradient>
</defs>
<!-- 從左到右漸變文字 -->
<text
x="20"
y="40"
font-family="Arial"
font-size="32"
font-weight="bold"
fill="url(#leftToRight)"
>
SVG 從左到右漸變
</text>
<!-- 從上到下漸變文字 -->
<text
x="20"
y="80"
font-family="Arial"
font-size="32"
font-weight="bold"
fill="url(#topToBottom)"
>
SVG 從上到下漸變
</text>
<!-- 從右到左漸變文字 -->
<text
x="20"
y="120"
font-family="Arial"
font-size="32"
font-weight="bold"
fill="url(#rightToLeft)"
>
SVG 從右到左漸變
</text>
<!-- 從下到上漸變文字 -->
<text
x="20"
y="160"
font-family="Arial"
font-size="32"
font-weight="bold"
fill="url(#bottomToTop)"
>
SVG 從下到上漸變
</text>
</svg>
完整示例代碼
index.css
樣式代碼
html,
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #000;
color: #fff;
font-family: 'Segoe UI', 'Arial', sans-serif;
font-size: 16px;
line-height: 1.5;
display: flex;
flex-direction: column;
align-items: center;
user-select: none;
}
/* 外層容器 */
.container {
width: 80%;
max-width: 900px;
margin: 40px auto;
padding: 24px;
background: #181c24;
border-radius: 18px;
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45);
border: 1.5px solid #232936;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.panel {
position: relative;
width: 100%;
display: flex;
flex-direction: column;
gap: 12px;
}
.panel-box-title {
font-weight: bold;
color: #ffb86c;
text-shadow: 0 2px 8px #181c24cc;
}
/* 通用文字樣式 */
.content-text {
font-size: 32px;
font-weight: bold;
}
.box {
background: #191b22;
border-radius: 14px;
padding: 24px;
box-shadow: 0 4px 32px rgba(0, 0, 0, 0.32);
display: flex;
flex-direction: column;
border: 1.5px solid #232936;
transition: box-shadow 0.2s, border 0.2s;
position: relative;
overflow: hidden;
z-index: 1;
}
.box:hover {
box-shadow: 0 8px 48px 0 rgba(0, 0, 0, 0.76);
border: 1.5px solid #3a3f4b;
}
.up-gradient {
background: linear-gradient(to top, #b1495a, #c71a44);
/* 背景被裁剪成文字的前景色。 */
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* 文字透明填充 */
text-fill-color: transparent;
}
.down-gradient {
background: linear-gradient(to bottom, #b1495a, #c71a44);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* 文字透明填充 */
text-fill-color: transparent;
}
.left-gradient {
background: linear-gradient(to left, #b1495a, #c71a44);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* 文字透明填充 */
text-fill-color: transparent;
}
.right-gradient {
background: linear-gradient(to right, #b1495a, #c71a44);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* 文字透明填充 */
text-fill-color: transparent;
}
/* 多顏色漸變 */
.multi-gradient {
background: linear-gradient(90deg, #b1495a 10%, #c71a44 50%, #ffb86c 80%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* 文字透明填充 */
text-fill-color: transparent;
}
index.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>文字漸變</title>
<link rel="stylesheet" href="index.css" rel="external nofollow" rel="external nofollow" />
</head>
<body>
<div class="container">
<h1>前端實(shí)現(xiàn)文字漸變的幾種方式</h1>
<!-- css版本 -->
<article class="panel">
<div class="panel-box-title">CSS版:</div>
<div class="box">
<div class="content-text up-gradient">向上漸變</div>
<div class="content-text down-gradient">向下漸變</div>
<div class="content-text left-gradient">向左漸變</div>
<div class="content-text right-gradient">向右漸變</div>
<!-- 設(shè)置多個(gè)顏色 -->
<div class="content-text multi-gradient">多顏色漸變</div>
</div>
</article>
<!-- canvas版本 -->
<article class="panel">
<div class="panel-box-title">Canvas版:</div>
<div class="box">
<canvas id="canvas" height="180" width="900"></canvas>
</div>
</article>
<!-- svg版本 -->
<article class="panel">
<div class="panel-box-title">SVG版:</div>
<div class="box">
<svg width="900" height="180" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- 從左到右漸變 -->
<linearGradient
id="leftToRight"
x1="0%"
y1="0%"
x2="100%"
y2="0%"
>
<stop
offset="0%"
style="stop-color: #b1495a; stop-opacity: 1"
/>
<stop
offset="100%"
style="stop-color: #c71a44; stop-opacity: 1"
/>
</linearGradient>
<!-- 從上到下漸變 -->
<linearGradient
id="topToBottom"
x1="0%"
y1="0%"
x2="0%"
y2="100%"
>
<stop
offset="0%"
style="stop-color: #b1495a; stop-opacity: 1"
/>
<stop
offset="100%"
style="stop-color: #c71a44; stop-opacity: 1"
/>
</linearGradient>
<!-- 從右到左漸變 -->
<linearGradient
id="rightToLeft"
x1="100%"
y1="0%"
x2="0%"
y2="0%"
>
<stop
offset="0%"
style="stop-color: #b1495a; stop-opacity: 1"
/>
<stop
offset="100%"
style="stop-color: #c71a44; stop-opacity: 1"
/>
</linearGradient>
<!-- 從下到上漸變 -->
<linearGradient
id="bottomToTop"
x1="0%"
y1="100%"
x2="0%"
y2="0%"
>
<stop
offset="0%"
style="stop-color: #b1495a; stop-opacity: 1"
/>
<stop
offset="100%"
style="stop-color: #c71a44; stop-opacity: 1"
/>
</linearGradient>
</defs>
<!-- 從左到右漸變文字 -->
<text
x="20"
y="40"
font-family="Arial"
font-size="32"
font-weight="bold"
fill="url(#leftToRight)"
>
SVG 從左到右漸變
</text>
<!-- 從上到下漸變文字 -->
<text
x="20"
y="80"
font-family="Arial"
font-size="32"
font-weight="bold"
fill="url(#topToBottom)"
>
SVG 從上到下漸變
</text>
<!-- 從右到左漸變文字 -->
<text
x="20"
y="120"
font-family="Arial"
font-size="32"
font-weight="bold"
fill="url(#rightToLeft)"
>
SVG 從右到左漸變
</text>
<!-- 從下到上漸變文字 -->
<text
x="20"
y="160"
font-family="Arial"
font-size="32"
font-weight="bold"
fill="url(#bottomToTop)"
>
SVG 從下到上漸變
</text>
</svg>
</div>
</article>
</div>
</body>
<script>
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
ctx.font = '32px Arial'
// 從左到右的漸變文字
const leftToRightGradient = ctx.createLinearGradient(0, 0, canvas.width, 0)
leftToRightGradient.addColorStop(0, '#fff')
leftToRightGradient.addColorStop(1, '#000')
ctx.fillStyle = leftToRightGradient
ctx.fillText('Canvas 從左到右漸變', 20, 40)
// 從上到下的漸變文字
const topToBottomGradient = ctx.createLinearGradient(0, 0, 0, canvas.height)
topToBottomGradient.addColorStop(0, '#fff')
topToBottomGradient.addColorStop(1, '#000')
ctx.fillStyle = topToBottomGradient
ctx.fillText('Canvas 從上到下漸變', 20, 80)
// 從右到左的漸變文字
const rightToLeftGradient = ctx.createLinearGradient(canvas.width, 0, 0, 0)
rightToLeftGradient.addColorStop(0, '#fff')
rightToLeftGradient.addColorStop(1, '#000')
ctx.fillStyle = rightToLeftGradient
ctx.fillText('Canvas 從右到左漸變', 20, 120)
// 從下到上的漸變文字
const bottomToTopGradient = ctx.createLinearGradient(0, canvas.height, 0, 0)
bottomToTopGradient.addColorStop(0, '#fff')
bottomToTopGradient.addColorStop(1, '#000')
ctx.fillStyle = bottomToTopGradient
ctx.fillText('Canvas 從下到上漸變', 20, 160)
</script>
</html>
結(jié)尾
日常開發(fā)中還是css版本的比較常用。另外兩種，只有在特定環(huán)境下才有用。
相關(guān)文章
這篇文章主要介紹了ES6 async、await的基本使用方法,結(jié)合實(shí)例形式分析了ES6 async、await的基本功能、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2020-06-06
使用CoffeeScrip優(yōu)美方式編寫javascript代碼
CoffeeScript就是JavaScript，他進(jìn)行的是一對一的編譯，或者說是翻譯，而且編譯成的JavaScript代碼可讀性很強(qiáng)。本文給大家介紹使用CoffeeScript優(yōu)美方式編寫javascript代碼，感興趣的朋友一起看看吧2015-10-10
Bootstrap CSS組件之按鈕組(btn-group)
這篇文章主要為大家詳細(xì)介紹了Bootstrap CSS組件之按鈕組(btn-group)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
js window.onload 加載多個(gè)函數(shù)和追加函數(shù)詳解
本篇文章主要是對js window.onload 加載多個(gè)函數(shù)和追加函數(shù)進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
JavaScript 有個(gè) with 關(guān)鍵字, with 語句的原本用意是為逐級的對象訪問提供命名空間式的速寫方式。這篇文章主要介紹了JavaScript中with語句的相關(guān)知識(shí)，感興趣的朋友一起學(xué)習(xí)吧2016-05-05
這篇文章主要給大家介紹了關(guān)于最新JavaScript判斷是否是360瀏覽器方法的相關(guān)資料,我們在做項(xiàng)目的時(shí)候有用到判斷不同瀏覽器的這個(gè)需求,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下2023-07-07
本文介紹了如何配置webpack項(xiàng)目,包括設(shè)置項(xiàng)目出入口、模式、devtool、本地環(huán)境和內(nèi)存HTML插件,以及安裝開發(fā)工具webpack-dev-server2026-01-01
這篇文章主要為大家詳細(xì)介紹了如何使用p5.js臨摹動(dòng)態(tài)圖形，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
微信小程序?qū)崿F(xiàn)image組件圖片自適應(yīng)寬度比例顯示的方法
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)image組件圖片自適應(yīng)寬度比例顯示的方法,簡單講述了image組件的常用屬性,并結(jié)合實(shí)例形式分析了微信小程序?qū)崿F(xiàn)圖片自適應(yīng)寬度比例的相關(guān)操作技巧,需要的朋友可以參考下2018-01-01
這篇文章主要給大家介紹了關(guān)于微信小程序?qū)W習(xí)筆記之頁面配置與路由方式的相關(guān)資料,頁面配置和路由是學(xué)習(xí)微信小程序必然會(huì)遇到的,本文通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-06-06