CSS 渐变编辑器

支持 linear / radial / conic 三种渐变，调节角度与多色标，实时预览并生成代码

渐变配置

选择渐变类型、调整角度与颜色，下方预览实时更新

0° 自下而上 / 90° 自左而右 / 180° 自上而下

实时预览

radial 类型时角度控件自动禁用；conic 类型角度表示起始角度

CSS 代码 
// CSS 代码将在这里显示...
广告位

使用说明

  1. 选择渐变类型：linear（线性渐变）、radial（径向渐变）、conic（圆锥渐变）
  2. linear 与 conic 类型下，拖动角度滑块调整渐变方向（0-360°）
  3. 在色标列表中设置每个色标的颜色和位置（0-100%），位置按从小到大自动排序
  4. 点击"添加色标"插入新色标（最多 5 个），点击色标卡片右上角"删除"移除
  5. 点击"反转颜色"可快速交换首尾色，点击"重置"恢复默认配置
  6. 预览区实时显示渐变效果，底部代码区同步生成 CSS，点击"复制代码"即可使用

适用场景

  • 页面背景：为区块、卡片、按钮设计渐变背景
  • 品牌配色：根据品牌主色生成协调的多色渐变
  • 按钮高亮：linear 渐变营造立体光泽效果
  • 视觉聚焦：radial 渐变制作聚光灯、光晕效果
  • 创意装饰：conic 渐变生成色轮、饼图视觉

安全保障

  • 本地处理：所有颜色计算与代码生成在浏览器本地完成
  • 隐私保护：不收集、不存储、不上传任何配置数据
  • 无网络请求：操作过程不发起任何外部请求
  • 免费使用：无需注册登录，打开即用

常见问题

linear 渐变的角度是如何定义的？

linear-gradient 的角度 0deg 表示从下到上渐变，90deg 表示从左到右，180deg 表示从上到下，270deg 表示从右到左。角度按顺时针方向递增。本工具的角度滑块范围是 0-360°，对应 CSS 标准的 deg 单位。

radial 和 conic 渐变有什么区别？

radial（径向）渐变是从中心点向外围呈圆形/椭圆形扩散，常用于聚光灯效果；conic（圆锥）渐变是围绕中心点按角度旋转过渡颜色，常用于制作色轮、饼图等。两者视觉效果完全不同，建议切换类型查看预览。

色标位置必须按顺序排列吗？

本工具会自动按位置从小到大排序色标，无论您添加顺序如何，最终代码中的色标都会按位置升序排列，确保渐变效果正确。建议位置间隔合理（如 0%、25%、50%、75%、100%），避免重叠导致颜色断层。

最多支持几个色标？

本工具最多支持 5 个色标（含起始色与结束色）。对于绝大多数设计场景 2-4 个色标已经足够；如需更多色标，可复制代码后手动在 CSS 中补充。色标数量过多反而容易导致颜色过渡杂乱，建议精简。