CSS渐变生成器
从一组颜色停止点生成CSS linear-gradient、radial-gradient或conic-gradient声明——复制生成的CSS到您的样式表中。
输入
线性渐变的方向，圆锥渐变的起始角度。
输出
使用此工具的更多方式
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-gradient-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"gradientType": "linear",
"angle": "90",
"color1": "#ff0000",
"position1": "0",
"color2": "#0000ff",
"position2": "100",
"useColor3": "",
"color3": "#ff6b6b",
"position3": "50"
}'替换成您账户中的密钥。工具的字段即为请求体——没有额外包装。
让 AI 代理执行
Use the IOTools `css-gradient-generator` tool (CSS Gradient Generator) on this input:
YOUR_INPUT_HERE将此粘贴给任何已连接 IOTools MCP 服务器的代理,再加上您的输入内容。
嵌入式小组件
<iframe
src="https://iotools.cloud/embed/css-gradient-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渐变生成器将渐变类型、角度和一小组颜色停止点转换为可复制的background CSS声明。选择线性、径向或圆锥，选择最多三种颜色以及各自的位置百分比，生成的CSS将在您调整控件时实时更新。
线性 vs. 径向 vs. 圆锥渐变
线性渐变 — 颜色沿选定角度的直线过渡。
0deg指向上方，90deg指向右方，180deg指向下方，依此类推绕圆周。这是最常见的渐变类型，用于背景、按钮和叠加层。background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%);径向渐变 — 颜色从中心点向外辐射而不是沿着线，产生圆形或椭圆形混合。无需设置角度；浏览器的默认值（调整至最远角落的椭圆，在元素中心）涵盖绝大多数使用场景。
background: radial-gradient(#464aff 0%, #00d4ff 100%);圆锥渐变 — 颜色像色轮或饼图一样绕中心点扫过，而不是沿线混合或向外辐射。角度设置扫描的起始位置。
background: conic-gradient(from 45deg, #ff0000 0%, #00ff00 50%, #0000ff 100%);
颜色停止点和位置
每个颜色停止点将颜色与沿渐变的位置百分比（0-100%）配对。位置0%是渐变开始的地方，100%是结束的地方；之间的停止点控制每种颜色达到完全强度的位置。此工具支持两个必需的颜色停止点加一个可选的第三个——足以构建实际设计中使用的绝大多数二色和三色渐变。停止点按位置自动排序，因此您输入它们的顺序无关紧要。
如何使用
- 选择渐变类型：线性、径向或圆锥。
- 对于线性和圆锥渐变，设置角度 — 线性渐变的混合方向，或圆锥渐变的扫描起始点。
- 选择颜色1和颜色2及其位置 — 这些定义了渐变的开始和结束。
- 如果需要中间颜色，请切换添加第三个颜色停止点，并设置其颜色和位置。
- 从代码输出中复制生成的
background声明，并将其粘贴到您的样式表中。
常见问题
为什么径向渐变没有形状或位置选项？
浏览器默认值——调整至最远角落的椭圆，在元素中心——已经符合大多数径向渐变的使用方式。如果您需要圆形而不是椭圆，或需要离心渐变，请手动将circle关键字或at <position>子句添加到生成的CSS中。
我可以使用三个以上的颜色停止点吗？
此工具限制为三个以保持界面简洁。对于具有更多停止点的渐变，获取生成的CSS并手动扩展逗号分隔的<color> <position>%对列表——无论添加多少个停止点，语法都相同。
圆锥渐变的角度是什么意思？
这是颜色扫描开始的角度（以度为单位），从顶部顺时针测量。0deg从12点钟位置开始扫描；90deg从3点钟位置开始。
此工具是否存储或上传任何内容？ 否。所有计算都在您的浏览器中本地运行——您的颜色和位置值永不离开您的设备。