前端实现文字渐变的三种方式

更新时间：2025年07月07日 08:28:26 作者：飞天猫猫头

这篇文章主要介绍了前端实现文字渐变的三种方式：CSS通过背景渐变与裁切实现,Canvas利用createLinearGradient绘制,SVG通过定义渐变并应用到文字,CSS最常用,其他两种适用于特定场景,需要的朋友可以参考下

前言

最近开发的时候发现很多ui图上面的标题都是带有渐变效果的，这里就记录一下前端实现文字渐变的几种方式。

完整效果如下

CSS 方式

通过给文字容器的背景设置渐变颜色，并使用background-clip属性，将其以文字内容进行裁切。最后使用text-fill-color属性，给文字设置透明填充来实现

属性名称	值	效果
background	linear-gradient(to top, #b1495a, #c71a44)	给文字容器设置渐变背景色
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 结构

<body>
  <div class="container">
    <h1>CSS实现文字渐变</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>
        <!-- 设置多个颜色 -->
        <div class="content-text multi-gradient">多颜色渐变</div>
      </div>
    </article>
  </div>
</body>

Canvas 方式

canvas中的文字渐变的实现方式就很简单了，因为canvas可以直接给文字设置渐变样式。

主要用到createLinearGradient方法，用来创建一个线性渐变，addColorStop设置渐变的色标，就像是这个效果

最后再用fillStyle指定使用我们创建的渐变对象即可

效果如下

核心代码

<!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)"将渐变应用到文字上。

渐变效果如下

核心代码如下

    <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>前端实现文字渐变的几种方式</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>
          <!-- 设置多个颜色 -->
          <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>

结尾

日常开发中还是css版本的比较常用。另外两种，只有在特定环境下才有用。

您可能感兴趣的文章:

JavaScript 中比较字符串的 4 种方法示例详解
这篇文章主要介绍了在 JavaScript 中比较字符串的 4 种方法,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-10-10
JS跳过debugger的几种方法小结
本文主要介绍了JS跳过debugger的几种方法小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-07-07
JavaScript重定向URL参数的两种方法小结
关于JavaScript重定向URL参数的实现方法网站有很多，这篇文章的主要内容是从网上查找，并进行了修改，简单粗暴的实现使用JavaScript重置url参数，文中给出了详细的示例代码和调用代码，对大家的理解和学习很有帮助，感兴趣的朋友们下面来一起看看吧。
2016-10-10
基于javascript实现根据身份证号码识别性别和年龄
这篇文章主要介绍了基于javascript实现根据身份证号码识别性别和年龄的相关资料,需要的朋友可以参考下
2016-01-01
动态加载iframe时get请求传递中文参数乱码解决方法
这篇文章主要介绍了动态加载iframe时get请求传递中文参数乱码解决方法,需要的朋友可以参考下
2014-05-05
自己编写的类似JS的trim方法
在这里我们可以使用自己编写的trim方法来处理一些剪掉字符串两端的空字符串的需要，下面有个不错的方法，感兴趣的朋友可以参考下
2013-10-10
原生JavaScript实现换肤
这篇文章主要为大家详细介绍了原生JavaScript实现换肤，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-02-02
新手学习前端之js模仿淘宝主页网站
淘宝网大家在熟悉不过了，那么淘宝网首页模板是怎么做的呢？今天小编抽时间给大家分享新手学习前端之js模仿淘宝主页网站的相关资料,需要的朋友可以参考下
2016-10-10
setTimeout和setInterval的区别你真的了解吗?
setTimeout和setInterval这两个函数, 大家肯定都不陌生, 但可能并不是每个用过这两个方法的同学, 都了解其内部的实质
2011-03-03
flash调用js中的方法,让js传递变量给flash的办法及思路
前几天发表了将FlashVars写在JS函数中，实现与后台的实时变量更新，但是仅支持 IE，随后与 Luckyer 进行了交流，发现用 SetVariable 可以很方便的实现多浏览器兼容。举例如下。
2013-08-08

前端实现文字渐变的三种方式

目录

前言

CSS 方式

Canvas 方式

SVG 方式

完整示例代码

结尾

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具