即梦AI
抖音出品 AI视频图片生成
Envato Elements
无限下载设计素材与模版
Eagle
图片素材文献管理神器
Setapp
畅享240+款Mac优质应用
渐变色生成器
可视化调节多节点渐变，支持 OKLCH 广色域插值，一键生成 CSS 代码及阶梯色板。
💡 点击进度条空白处添加新颜色节点，拖拽调节位置
* OKLCH 是现代 CSS4 标准，能产生更自然、鲜艳的过渡，避免中间色发灰（Dead Zone）。
background: linear-gradient(in oklch 135deg, #8B5CF6 0%, #F43F5E 100%);
提示：OKLCH 模式需要现代浏览器 (Chrome 111+, Safari 15.4+, Firefox 113+)
自动生成阶梯色板 (Stepped Palette)
关于渐变色生成器 (Gradient Generator)
渐变色生成器是一个强大的在线 CSS3 渐变设计工具。它允许您通过可视化界面轻松创建复杂的线性（Linear）或径向（Radial）渐变。 不同于简单的双色生成器，本工具支持添加无限个颜色节点、精确控制位置、调整角度，并引入了现代 CSS 的 OKLCH 和 HSL 插值模式， 帮助设计师创造出更平滑、更鲜艳的色彩过渡效果。
如何使用
- 1添加节点： 在渐变进度条的任意空白处点击，即可添加一个新的颜色停靠点（Stop）。
- 2调整位置： 按住颜色节点左右拖动，改变颜色在渐变中的占比位置（0% - 100%）。
- 3修改颜色： 点击选中某个节点，下方会出现取色器，选择您喜欢的颜色。
- 4切换模式： 在顶部选择“线性”或“径向”，线性模式下可拖动滑块调整渐变角度。
- 5插值空间： 尝试切换 sRGB、HSL 或 OKLCH，观察中间过渡色的微妙变化，OKLCH 通常效果最佳。
核心概念解析
线性渐变 (Linear Gradient)
颜色沿着一条直线（角度）进行过渡。是网页背景、按钮最常用的渐变类型。CSS 语法：linear-gradient(angle, color1, color2)。
径向渐变 (Radial Gradient)
颜色从一个中心点向四周扩散，形成圆形或椭圆形的过渡。适合用来模拟光源或球体质感。
颜色节点 (Color Stops)
渐变线上的特定点，该点的颜色是纯正的。两个节点之间的颜色由浏览器算法自动计算生成。
OKLCH 插值
一种感知均匀的色彩空间。它解决了 sRGB 在混合对比色时出现的“发灰”问题，使过渡区更加鲜艳、自然。
为什么要用 OKLCH？
传统的 sRGB 渐变在混合两个对比色（例如蓝色和黄色）时，中间往往会出现令人不悦的灰暗地带（Dead Zone）。 这是因为 RGB 颜色空间并不符合人类的视觉感知线性。
OKLCH 是现代 CSS Color Level 4 引入的色彩空间。它是感知均匀的， 能够确保亮度和饱和度的线性过渡。使用 OKLCH 插值的渐变色看起来更加鲜艳、自然，过渡更加丝滑，彻底告别“中间发灰”的问题。
常见问题 (FAQ)
生成的 CSS 代码兼容旧浏览器吗？
linear-gradient (sRGB) 兼容性极好（IE10+）。如果您选择了 OKLCH 插值（in oklch 语法），则需要较新的浏览器（Chrome 111+, Safari 15.4+, Firefox 113+）。为什么我的渐变看起来有条纹（Banding）？
阶梯色板有什么用？
专注白噪音
雨声Lofi，为设计提供完美背景音。
精选神器
AD
阿里云
爆款云服务器特惠抢购
腾讯云
云产品特惠 性价比首选
腾讯元宝
免费DeepSeek AI助手
小绿鲸
英文文献阅读 科研必备