javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > 前端实现文字渐变

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

作者：飞天猫猫头

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

前言

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

完整效果如下

CSS 方式

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

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

效果如下

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

您可能感兴趣的文章:
阅读全文