CSS渐变文字生成器
生成将渐变效果应用于文字的CSS代码。 实时预览颜色、方向和范围的调整效果。
Gradient Text
0%
100%
.gradient-text {
background: linear-gradient(to right, #ec4899 0%, #8b5cf6 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 48px;
font-weight: 700;
}分享此工具
📖
使用方法
Step 1
输入文本
输入要应用渐变效果的文本
→
Step 2
设置渐变
调整渐变颜色、方向、类型等
→
Step 3
复制CSS
复制生成的CSS代码
✨
功能特点
实时预览
实时预览渐变文字效果
多种渐变
支持线性渐变、径向渐变、锥形渐变及多色标
内置预设
一键应用热门渐变预设
❓
FAQ
一种CSS技术，使用background-clip: text将渐变背景应用到文字上。
🔗相关工具
🎨
设计工具颜色代码转换器
在 HEX、RGB 和 HSL 颜色代码之间转换。 使用取色器和实时预览直观选择颜色。
🎨
设计工具取色器
使用色轮和滑块直观选择颜色。 获取并复制 HEX、RGB 和 HSL 格式的颜色代码。
🎨
设计工具图片颜色提取器
自动检测图片中的主色调并生成色板。 还可以点击图片任意位置提取单个颜色。
🎯
设计工具图片平均色提取器
计算整张图片或选定区域的平均颜色。 适用于配色方案选择或缩略图背景色。
🌈
设计工具CSS 渐变生成器
通过拖拽控制可视化创建 CSS 渐变。 支持线性、径向和锥形渐变类型，带预设。
🔲
设计工具CSS 阴影生成器
通过滑块可视化创建 CSS box-shadow。 支持多重阴影和内阴影。