css彩色文字-文字色渐变

最新推荐文章于 2024-12-05 17:21:37 发布

芩婳

最新推荐文章于 2024-12-05 17:21:37 发布

阅读量474

点赞数 1

文章标签： css

本文链接：https://blog.csdn.net/qq_38836995/article/details/105509126

版权

本文介绍了一种使用CSS实现文字颜色渐变的方法，通过设置背景渐变并结合特定的CSS属性，可以实现在不同方向上的文字颜色渐变效果，如上下渐变或左右渐变。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文字颜色上下渐变

<div class="font">
          <p>文字颜色渐变</p>
</div>
.font {
        font-size: 60px;
        margin-top: 100px;
        font-weight: bold;
        background-image: -webkit-linear-gradient(bottom, #b61915, #ffff00);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

效果图
可以根据不同需要改变渐变起始位置，如上述代码上下渐变可用bottom，也可左右渐变改为left或者right即可。