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

🎨 前言

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

完整效果如下

🎯 CSS 方式

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

属性名称 效果
background linear-gradient(to top, #b1495a, #c71a44) 给文字容器设置渐变背景色
background-clip text 背景被裁切成文字的前景色
text-fill-color transparent 文字的填充颜色

效果如下

  • 具体样式代码
css 复制代码
.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 结构

    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指定使用我们创建的渐变对象即可

效果如下

核心代码

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" />
  </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 复制代码
    <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

样式代码

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

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" />
  </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版本的比较常用。另外两种,只有在特定环境下才有用。

相关推荐
huxihua200615 分钟前
各种前端框架界面
前端
拾光拾趣录15 分钟前
GET/POST 的区别:从“为什么登录请求不能用 GET”说起
前端·网络协议
Carlos_sam32 分钟前
OpenLayers:ol-wind之渲染风场图全解析
前端·javascript
拾光拾趣录41 分钟前
闭包:从“变量怎么还没死”到写出真正健壮的模块
前端·javascript
拾光拾趣录1 小时前
for..in 和 Object.keys 的区别:从“遍历对象属性的坑”说起
前端·javascript
OpenTiny社区1 小时前
把 SearchBox 塞进项目,搜索转化率怒涨 400%?
前端·vue.js·github
编程猪猪侠2 小时前
Tailwind CSS 自定义工具类与主题配置指南
前端·css
qhd吴飞2 小时前
mybatis 差异更新法
java·前端·mybatis
YGY Webgis糕手之路2 小时前
OpenLayers 快速入门(九)Extent 介绍
前端·经验分享·笔记·vue·web
患得患失9492 小时前
【前端】【vueDevTools】使用 vueDevTools 插件并修改默认打开编辑器
前端·编辑器