渐变文字 CSS 生成器
生成渐变文字的 CSS：通过 background-clip: text（含 -webkit- 前缀）将线性或径向渐变裁剪到字形上，并使用透明填充。复制现成的类或内联代码片段即可使用。
输入
显示在预览和 HTML 代码片段中。无论此文字为何，CSS 类都相同。
线性渐变的方向。
输出
渐变文字将显示在这里。
将此内容添加到样式表，然后为元素应用 class="gradient-text"。
内联样式的 span 元素，无需样式表，可直接粘贴到任何位置。
使用此工具的更多方式
REST API
curl -X POST https://api.iotools.cloud/v1/tool/gradient-text-css-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"sampleText": "Gradient Text",
"fontSize": "72",
"fontWeight": "700",
"gradientType": "linear",
"angle": "90",
"color1": "#464aff",
"position1": "0",
"color2": "#ff6b9d",
"position2": "100",
"useColor3": "",
"color3": "#ffd93d",
"position3": "50"
}'替换成您账户中的密钥。工具的字段即为请求体——没有额外包装。
让 AI 代理执行
Use the IOTools `gradient-text-css-generator` tool (Gradient Text CSS Generator) on this input:
YOUR_INPUT_HERE将此粘贴给任何已连接 IOTools MCP 服务器的代理,再加上您的输入内容。
嵌入式小组件
<iframe
src="https://iotools.cloud/embed/gradient-text-css-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="渐变文字 CSS 生成器 — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>把它放到您自己的页面上——免费,无需密钥,只需保留一个反向链接。
| 每次 API/MCP 调用费用 | 5 积分起 |
|---|---|
| 需要更多积分? | 查看定价 |
也可通过
使用指南
渐变文字通过把颜色渐变直接绘制在字母上（而不是纯色填充），让普通的标题变得醒目。这款渐变文字 CSS 生成器会为你生成精确的 CSS：选择颜色、方向、字号和字重，实时查看预览效果，然后复制现成的类或独立的内联代码片段即可。
渐变文字的工作原理
这一效果依赖于几个 CSS 属性的巧妙组合。你将渐变设置为元素的 background-image，用 background-clip: text 将背景裁剪为字形，再把文字填充设为透明，使渐变透出来：
.gradient-text {
background-image: linear-gradient(90deg, #464aff 0%, #ff6b9d 100%);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
display: inline-block;
}-webkit-background-clip 和 -webkit-text-fill-color 这两行是实现广泛浏览器兼容的关键。Chrome、Safari 以及其他基于 WebKit/Blink 的浏览器需要带前缀的版本，而本生成器始终会包含它们，以确保文字在各处都能正常显示。
使用生成器
- 输入示例文字，即可在实时预览中看到效果。
- 选择渐变类型——线性渐变呈直线横扫文字，径向渐变则是从中心向外扩散的光晕。
- 设置角度（仅线性渐变），以控制横扫的方向，范围从
0deg（从下到上）到90deg（从左到右）。 - 添加色标。 默认启用两个颜色；勾选“添加第三个色标”可获得更丰富的多色混合。每个色标的位置范围为 0% 到 100%。
- 调整字号和字重，使其与你要设计的标题相匹配。
该工具会输出两样内容：可添加到样式表中的 .gradient-text CSS 类，以及样式已内联的独立 HTML span 代码——适用于邮件模板、CMS 内容块，或任何无法添加样式表的场合。
为什么我的渐变文字看起来被截断了？
由于背景被裁剪到文字的形状，元素需要 display: inline-block（或 block），裁剪区域才能正确计算尺寸——本生成器会自动添加此设置。如果字母的下伸部分被截掉，可以为元素增加一点 line-height 或 padding。
渐变文字是否无障碍？
渐变可能会降低对比度，因此请确保混合色中最深的颜色在你的背景上依然清晰可读，并将这种效果用于大标题，而不是正文。屏幕阅读器会正常读取底层文字，因此在语义上没有任何不利影响。
这会把我的文字发送到别处吗？
不会。CSS 完全在你的浏览器中生成——不会上传任何内容，页面加载完成后，该工具即使离线也能工作。