CSS怎样实现文字竖向渐变？writing-mode+渐变背景-css教程-PHP中文网

要实现文字竖向渐变，核心是利用writing-mode改变文字方向，结合background-clip: text将渐变背景裁剪到文字轮廓内，并通过-webkit-text-fill-color: transparent使文字颜色透明以露出背景色；其中-webkit-前缀是因background-clip: text最初由webkit浏览器支持，兼容性需要前缀保障；调整渐变方向时需注意writing-mode旋转坐标系的影响，如vertical-rl下应使用linear-gradient(to right, ...)实现视觉上的从上到下渐变，颜色分布可通过添加颜色停止点精确控制；排版时需关注容器尺寸、line-height与letter-spacing在竖向中的角色转换、text-align对齐逻辑变化及字体适配问题，整体方案需兼顾布局与视觉细节以确保效果完整呈现。

CSS怎样实现文字竖向渐变？writing-mode+渐变背景

CSS实现文字竖向渐变，核心思路是把文字的排版方向改变成竖向，然后利用背景渐变色，并通过CSS属性把这个背景色“裁剪”到文字本身上，再把文字本身的颜色设为透明。这样，你看到的文字就呈现出渐变效果了。这听起来有点绕，但实际操作起来并不复杂，主要用到

writing-mode

登录后复制

、

background-image

登录后复制

、

background-clip: text

登录后复制

和

-webkit-text-fill-color: transparent

登录后复制

这几个属性。

.vertical-gradient-text {
  /* 1. 设置文字竖向排版 */
  writing-mode: vertical-rl; /* 从右到左，文字从上到下 */
  /* 或者 vertical-lr; 从左到右，文字从上到下 */

  /* 2. 设置渐变背景 */
  background-image: linear-gradient(to bottom, #ff0000, #0000ff); /* 从上到下的红蓝渐变 */

  /* 3. 关键步骤：将背景裁剪到文字内部 */
  -webkit-background-clip: text; /* Webkit内核浏览器支持 */
  background-clip: text; /* 标准属性，但兼容性仍需注意 */

  /* 4. 将文字颜色设为透明，露出背景色 */
  -webkit-text-fill-color: transparent; /* Webkit内核浏览器支持 */
  color: transparent; /* 作为备用或部分浏览器支持 */

  /* 其他样式，例如字体大小、粗细 */
  font-size: 48px;
  font-weight: bold;
  line-height: 1.2; /* 竖向排版时，line-height控制的是行间距 */
}

登录后复制

这段CSS代码配合一个简单的HTML元素，比如

<div class="vertical-gradient-text">你的渐变文字</div>

登录后复制

，就能看到效果了。

为什么文字渐变需要用到-webkit-前缀？

我个人感觉，文字渐变这个需求，在前端开发里算是比较“古老”但又一直没有得到完美标准化的一个痛点。早些年，CSS本身并没有直接给文字设置渐变色的属性。所以，大家就想出了这种“曲线救国”的办法：把渐变色应用到一个元素的背景上，然后想办法让这个背景只在文字的形状范围内显示出来。

立即学习“前端免费学习笔记（深入）”；

这里面最关键的属性就是

background-clip: text

登录后复制

。它本来是用来控制背景图片或颜色应该在元素的哪个区域内显示（比如

padding-box

登录后复制

、

content-box

登录后复制

），但当它的值被设为

text

登录后复制

时，它就变得非常特殊了——它会让背景只显示在文字的轮廓里。

问题就在于，这个

background-clip: text

登录后复制

属性，最初是由WebKit内核的浏览器（比如Chrome、Safari）率先实现并推广的。在很长一段时间里，它都是一个实验性属性，所以需要加上

-webkit-

登录后复制

前缀才能生效。虽然现在CSS标准也在逐步推进，

background-clip

登录后复制

已经是一个标准属性了，但具体到

text

登录后复制

这个值，它的兼容性在非WebKit内核的浏览器（比如Firefox、Edge的旧版本）上仍然不尽如人意，或者需要一些变通。

所以，为了确保你的文字渐变效果能在主流浏览器上都正常显示，目前最稳妥的做法还是同时使用带

-webkit-

登录后复制

前缀的版本和标准版本。这就像我们写CSS动画或者弹性布局早期，总要写一堆前缀一样，是历史遗留问题，也是为了兼容性不得不做的妥协。有时候我在想，CSS规范是不是可以考虑直接给个

text-gradient

登录后复制

属性，那该多省心啊！

如何调整竖向渐变的方向和颜色分布？

调整竖向渐变的方向和颜色分布，其实就是玩转

linear-gradient()

登录后复制

这个函数。它非常灵活，能让你精确控制渐变的起始方向、颜色以及每个颜色的位置。

在我们的竖向文字渐变场景里，

writing-mode

登录后复制

已经把文字“竖”起来了，但

linear-gradient

登录后复制

的渐变方向是相对于文字所在的这个元素的原始盒子模型来计算的，而不是相对于文字旋转后的视觉方向。这是一个很多人会搞混的地方。

比如说，如果你的

writing-mode

登录后复制

是

vertical-rl

登录后复制

（文字从上到下，整体从右往左排列），你希望渐变是从文字的“顶部”开始，逐渐过渡到“底部”。那么，对于一个正常的水平排版元素来说，这个方向是

to right

登录后复制

。所以，你得这样写：

腾讯智影-AI数字人

基于AI数字人能力，实现7*24小时AI数字人直播带货，低成本实现直播业务快速增增，全天智能在线直播

查看详情

background-image: linear-gradient(to right, #ff0000, #0000ff);

登录后复制

是的，你没看错，是

to right

登录后复制

。因为

writing-mode: vertical-rl

登录后复制

会将整个块级元素的内容流旋转90度，原本的水平方向变成了垂直方向。所以，如果你想要视觉上从上到下的渐变，在原始未旋转的坐标系里，它实际上是从左到右的渐变。

方向控制：
- ```
to top
```
  登录后复制
  ：渐变从下到上。
- ```
to bottom
```
  登录后复制
  ：渐变从上到下。
- ```
to left
```
  登录后复制
  ：渐变从右到左。
- ```
to right
```
  登录后复制
  ：渐变从左到右。
- 你也可以用角度：
```
45deg
```
  登录后复制
  、
```
90deg
```
  登录后复制
  等。
```
0deg
```
  登录后复制
  是
```
to top
```
  登录后复制
  ，
```
90deg
```
  登录后复制
  是
```
to right
```
  登录后复制
  ，以此类推。
- 所以，如果你的
```
writing-mode
```
  登录后复制
  是
```
vertical-rl
```
  登录后复制
  ，并且你想让渐变在视觉上是从文字的“顶端”到“底端”，那么你应该设置
```
linear-gradient(to right, ...)
```
  登录后复制
  。如果是
```
vertical-lr
```
  登录后复制
  ，也同样是
```
to right
```
  登录后复制
  。
颜色分布：
```
linear-gradient()
```
登录后复制
后面可以跟多个颜色值，每个颜色值后面还可以跟一个百分比或长度值，表示该颜色在渐变线上的位置。
- ```
linear-gradient(to right, #ff0000, #0000ff)
```
  登录后复制
  ：默认均匀分布，红色在起点，蓝色在终点。
- ```
linear-gradient(to right, #ff0000 0%, #ffff00 50%, #0000ff 100%)
```
  登录后复制
  ：从红色开始，到50%位置变成黄色，最后到蓝色。
- ```
linear-gradient(to right, #ff0000, #ff0000 50%, #0000ff 50%, #0000ff)
```
  登录后复制
  ：这会创建一个硬边缘的渐变，前一半是红色，后一半是蓝色，没有平滑过渡。

通过调整这些参数，你可以实现各种细腻的渐变效果，比如多色渐变、指定颜色停止点，甚至重复渐变（使用

repeating-linear-gradient

登录后复制

）。这给了我们很大的创作空间。

使用竖向文字渐变时，文字排版有哪些细节需要注意？

当决定使用

writing-mode

登录后复制

来做竖向文字渐变时，你实际上不仅仅是让文字变了个方向，你是在改变整个文本流的“重力”方向。这会带来一些平时水平排版时不会遇到的排版细节问题。

首先，最明显的是尺寸和定位。一个原本宽度自适应、高度固定的元素，在

writing-mode: vertical-rl

登录后复制

或

vertical-lr

登录后复制

之后，它的宽度可能需要调整以适应文字的“高度”，而它的高度则会变成适应文字的“宽度”。举个例子，一个原本很长的水平句子，竖起来后，它会变成很多行，每行一个字（如果宽度不够），或者几个字。这会使得容器的实际宽度变得很窄，而高度变得很长。如果你没有明确设置容器的尺寸，或者没有使用弹性布局/网格布局来适应，很容易出现文字溢出或者容器尺寸不符合预期的情况。我通常会把包含竖向文字的容器也用Flexbox或Grid来布局，这样更容易控制其在父容器中的对齐和空间分配。

其次，是行高（