CSS 渐变编辑器

概述

CSS 渐变编辑器是一款可视化渐变设计工具，支持线性、径向、锥形三种渐变类型，可创建多个渐变图层叠加显示，并提供 15 种色彩空间插值选项，编辑完成后一键复制完整 CSS 代码。它适合需要精细控制渐变过渡效果的设计师和前端开发者。

三种渐变类型的典型用途

  • 线性渐变（linear-gradient）：颜色沿直线方向过渡，通过角度盘控制方向（0°–360°），最常见于页面背景分区和按钮填充
  • 径向渐变（radial-gradient）：从中心点向外辐射，可调整圆心位置、形状（圆形 / 椭圆）和尺寸（最近边 / 最远边 / 最近角 / 最远角），适合聚光灯效果和高光按钮
  • 锥形渐变（conic-gradient）：颜色围绕中心点旋转过渡，起始角度可设置，天然适合饼图、进度环和色轮选择器

多层渐变叠加的工作原理

图层列表顺序决定叠加优先级，上方图层先渲染，通过各层的透明度（opacity）实现混合。每层可独立设置渐变类型、色标颜色和位置，互不影响。增加图层数量会延长 CSS 代码，移动端建议控制在 1–2 层以避免过重的渲染负担。

色标操作：点击渐变条添加色标，拖动调整位置，选中后可编辑颜色值（支持十六进制、rgb()、lch()、oklch() 等）和透明度。CSS 渐变至少需要 2 个色标，删除至只剩 2 个时会阻止继续删除。

色彩空间对渐变过渡的影响

推荐使用的色彩空间

  • sRGB：兼容性最好，所有浏览器支持，适合生产环境首选
  • OKLCH：感知均匀，从红到蓝的过渡不会出现暗灰色阶，适合追求高质量视觉效果
  • HSL / HWB：极坐标空间，色相过渡更自然，避免 sRGB 的"中间灰"现象

广色域色彩空间

  • Display P3：支持比 sRGB 约 25% 更大的色域，适合现代 iPhone 和 Mac 显示器
  • Rec. 2020：超广色域，在普通显示器上与 sRGB 差异不明显
  • ProPhoto RGB：色域极宽，仅适合专业印刷工作流

极坐标空间（HSL、HWB、LCH、OKLCH）还可以设置色相插值方向：较短路径（默认）、较长路径、递增或递减，控制色相轮转的方向，避免出现意外的颜色跳跃。

浏览器兼容性

color-interpolation-method 语法（指定色彩空间和色相插值）是 CSS Color Level 4 特性，Chrome 111+、Safari 16.2+、Firefox 113+ 才完整支持。生产环境使用 OKLCH 或 Display P3 前，建议确认目标用户的浏览器版本分布，必要时降级为 sRGB 版本作为兼容方案。工具界面提示会说明当前浏览器是否支持所用颜色格式。