轻松创建美丽的 CSS 文本渐变
为您的网站创建令人惊叹的渐变文本效果
渐变控件
CSS 渐变文本
.gradient-text { background: linear-gradient(to right, #4F46E5, #EC4899); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
流行的渐变
Sunset
linear-gradient(to right, #FF512F, #F09819)
Magic
linear-gradient(to right, #4158D0, #C850C0, #FFCC70)
Ocean
linear-gradient(to right, #0093E9, #80D0C7)
Electric
linear-gradient(to right, #30CFD0, #330867)
水果沙拉
linear-gradient(to right, #FA709A, #FEE140)
Neon Glow
linear-gradient(to right, #00DBDE, #FC00FF)
如何使用
1
输入您的文本
在 “Text（文本）”输入字段中键入要应用渐变的文本。
2
选择 Gradient Type （渐变类型
在 Linear（线性）、Radial（径向）或 Conic（圆锥）渐变类型之间进行选择。
3
调整方向或角度
对于线性渐变，请选择一个方向。对于圆锥渐变，请设置角度。
4
自定义颜色
添加、删除或调整色标及其位置，以创建所需的渐变。
5
复制或保存 CSS
复制生成的 CSS 代码或将其另存为 CSS 文件以在项目中使用。
关于文本渐变
CSS 文本渐变允许您将漂亮的多色渐变直接应用于文本。这种效果曾经只能通过图像实现，但现代 CSS 使其变得简单高效。
浏览器支持：所有现代浏览器都支持文本渐变，包括 Chrome、Firefox、Safari 和 Edge。对于较旧的浏览器（如 Internet Explorer），文本将回退到纯色。
使用提示：文本渐变最适合粗体文本和高对比度颜色组合。尝试不同的渐变类型和方向以获得所需的效果。