css文字颜色渐变

最新推荐文章于 2025-02-14 15:58:06 发布

原创最新推荐文章于 2025-02-14 15:58:06 发布 · 599 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html

前端同时被 2 个专栏收录

32 篇文章

订阅专栏

HTML

17 篇文章

订阅专栏

本文介绍如何使用 CSS 实现文字的渐变效果，包括上下渐变和左右渐变的具体实现方式。通过设置背景渐变并结合特定属性，使纯文本具备视觉吸引力。

给文字添加渐变
在这里插入图片描述

//上下渐变
	p {
	  font-size: 48px;
	  background: -webkit-linear-gradient(#eee, #333);
	  -webkit-background-clip: text;
	  -webkit-text-fill-color: transparent;
	}
	//左右渐变
	p{
      width: 200px;//一定要给个宽度不然字少体现不出来
      font-size: 48px;
      background: linear-gradient(to right , #ff8763, #21884f);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }