如何用css实现渐变文字颜色-css教程-PHP中文网

如何用css实现渐变文字颜色

P粉602998670

发布： 2025-10-16 20:17:01

原创

1016人浏览过

使用CSS的background-clip:text结合linear-gradient可实现渐变文字，需设置背景为线性渐变、文字颜色透明，并添加-webkit-background-clip兼容处理，通过调整方向、颜色和字体优化效果。

如何用css实现渐变文字颜色

实现渐变文字颜色在现代网页设计中很常见，主要通过 CSS 的 background-clip 和 -webkit-background-clip 属性结合 linear-gradient 背景来完成。以下是具体方法。

1. 使用 background-clip: text

将背景应用到文字上，并裁剪背景只显示文字部分，这样就能看到渐变色的文字效果。

使用 background-image 设置线性渐变
设置 -webkit-background-clip: text 将背景裁剪为文字形状
将文字颜色设为透明，以便显示背景的渐变色

示例代码：

<style>
.gradient-text {
  font-size: 48px;
  font-weight: bold;
  background-image: linear-gradient(45deg, #ff7a00, #ff0080);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
</style>

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

登录后复制