锥形/径向/线性渐变生成器 — 多色 CSS 渐变，一键复制（免费）
颜色色标
至少需要 2 个色标。
CSS 输出
background: linear-gradient(90deg, #7C3AED 0%, #3B82F6 100%);相关外部工具
部分链接为联盟营销链接。
相关工具
这款免费的 CSS 渐变生成器支持线性（linear）、径向（radial）和锥形（conic）三种渐变类型，可添加任意数量的颜色色标。用取色器选色或直接输入 HEX，拖动位置滑块精确定位，实时查看大尺寸预览效果。调整角度（linear）、形状/大小/中心（radial）或起始角度/中心（conic），完成后一键复制 background CSS 或 Tailwind 值。无需安装、无需注册，所有计算均在浏览器本地完成，颜色数据不会上传。
使用方法
- 选择渐变类型：线性（linear）、径向（radial）或锥形（conic）。
- 编辑颜色色标：点击取色器或输入 HEX 值，用位置滑块（0–100%）调整每个色标的位置。
- 点击「添加色标」按钮（+）最多可添加 10 个色标，点击 × 删除（至少保留 2 个）。
- 调整类型专属参数：linear 调整角度，radial 选择形状/大小/中心，conic 设置起始角度/中心。
- 可从预设开始，或点击「随机生成」探索不同效果，再进行微调。
- 复制生成的 background CSS（或 Tailwind 值），粘贴到项目中即可使用。
渐变类型介绍
CSS 提供三种渐变函数，各有不同的视觉效果。本工具全部支持，按需选择。
线性渐变（linear-gradient）
颜色沿指定方向（角度）过渡变化。90deg 为从左到右，180deg 为从上到下（遵循 CSS 规范）。最常见的渐变类型，适合 Hero 背景、按钮、卡片装饰等。
径向渐变（radial-gradient）
颜色从中心点向外辐射扩散。可选择圆形或椭圆形，设置大小关键字和中心位置。适合聚光灯效果、光晕和柔和背景。
锥形渐变（conic-gradient）
颜色围绕中心点旋转变化，类似风车效果。可设置起始角度和中心位置。适合色轮、饼图风格装饰等创意效果。注意：conic-gradient 是较新的 CSS 特性，极旧的浏览器可能不支持。
功能特性
颜色色标：添加、删除与位置调整
点击 + 添加色标（最多 10 个），点击 × 删除（至少保留 2 个）。每个色标的位置滑块可在 0–100% 范围内精确调整。将两个色标放在同一位置可产生清晰的硬边界（无渐变过渡）。
角度、形状与中心位置
线性渐变有角度滑块（0–360°）。径向渐变可选择圆形/椭圆形、大小关键字和 X/Y 中心位置。锥形渐变可设置起始角度和中心位置。
取色器与 HEX 输入（支持透明度）
每个色标都有原生取色器和 HEX 文本输入框。降低不透明度（alpha）滑块可创建半透明色标，输出自动切换为 rgba() 格式（也可选择 HEX8 模式）。输入错误的颜色代码只会显示内联错误，不影响其他色标和预览。
大尺寸实时预览
页面顶部有一个大型预览区，编辑任何参数后立即更新显示，所见即所得，无任何延迟。
一键复制 CSS（支持 background、background-image 和 Tailwind）
选择输出格式后点击「复制 CSS」即可：background: linear-gradient(...); 用于直接 CSS，background-image: 用于多层背景，bg-[...] Tailwind 任意值用于 Tailwind 项目。颜色、角度和百分比均为 CSS 兼容格式，无本地化格式化。
预设与随机生成
点击预设色块即可快速应用精选渐变作为起点。点击「随机生成」获取全新的渐变效果，可在此基础上继续调整。
使用场景
Hero 背景、按钮与卡片渐变
为 Hero 区域或 CTA 按钮设置两到三色线性渐变，复制 background CSS 直接粘贴到样式表。径向渐变可在卡片后面呈现柔和的光晕效果。
直接粘贴到 CSS 或 Tailwind
选择 background: 输出并将完整 CSS 行粘贴到样式规则中。对于 Tailwind，切换到 Tailwind 选项卡复制 bg-[linear-gradient(...)] 类名，添加到 HTML 元素的 class 属性即可。
锥形渐变制作色轮与饼图效果
在锥形渐变中以等间距添加多个颜色色标，可制作色轮或饼图风格背景。例如在 0%、17%、33%、50%、67%、83% 处分别放置六种颜色，即可将圆形等分为六个色块。
注意事项与使用技巧
- 角度方向：0° 朝上，90° 从左到右，180° 从上到下——遵循 CSS 规范，可能与直觉有所不同。建议通过实时预览确认方向。
- 浏览器兼容性：linear-gradient 和 radial-gradient 在所有现代浏览器中均受支持。conic-gradient 是较新的特性，极旧的浏览器可能不支持，请在目标环境中测试。
- 省略位置则自动等分：若某个色标没有指定位置，浏览器会自动在相邻色标之间等距分配。
- 半透明渐变：降低色标的 alpha 值可获得 rgba() 输出，可叠加在背景色或图片上产生遮罩效果。
- 颜色数据不会上传：所有渐变计算均在浏览器本地完成，您的颜色选择和生成的 CSS 不会上传或存储。
常见问题
- 除了线性渐变，还能创建径向和锥形渐变吗？
- 可以。使用顶部的类型选择器切换线性（linear）、径向（radial）和锥形（conic）。每种类型显示其专属设置：线性显示角度，径向显示形状/大小/中心，锥形显示起始角度/中心。
- 可以添加两个以上的颜色色标吗？
- 可以。点击 + 按钮添加色标（最多 10 个），每个色标都有取色器、HEX 输入框和位置滑块。点击 × 删除，至少保留 2 个色标。
- 可以调整角度和中心位置吗？
- 可以。角度滑块控制线性渐变的方向（0–360°）。X/Y 滑块设置径向和锥形渐变的中心位置。径向渐变还有形状和大小选项。
- 可以直接复制 CSS 使用吗？
- 可以。输出区域显示完整的 background: linear-gradient(...); 行（或 background-image: 或 Tailwind 类名）。点击「复制 CSS」即可粘贴到您的样式表中。
- 可以在 Tailwind CSS 中使用吗？
- 可以。切换到 Tailwind 选项卡获取 bg-[...] 任意值类名，复制后添加到 HTML 元素的 class 属性，Tailwind JIT 编译器会自动处理。
- 可以制作半透明的 rgba 渐变吗？
- 可以。降低任意色标的不透明度（alpha）滑块至低于 100%，该色标的输出会自动切换为 rgba()，实现半透明渐变效果。
- 颜色数据会上传到服务器吗？
- 不会。所有渐变生成、颜色解析和 CSS 构建均在浏览器本地完成，您的颜色选择和生成的 CSS 不会上传或存储。