动态 RGB 渐变调色板
实时编辑 RGB 颜色、渐变类型、角度与多色停靠点,并一键复制可直接使用的 CSS 代码。
单文件 HTML · 离线可用 · 即时预览
渐变预览
拖动滑块、移动停靠点或切换类型时,背景即时更新。
linear-gradient · 90°
当前结果为可直接用于 CSS 的背景渐变。左/下方提供线性与径向切换、角度调节、多色停靠点管理以及 RGB 实时编辑。
停靠点
2
当前类型
线性
当前角度
90°
渐变配置
支持线性 / 径向渐变切换,以及方向与角度调节。
渐变类型
默认线性渐变
线性渐变
径向渐变
角度调节
90
°
角度数值
0°–360°
方向快捷
常用方向
向上
右上
向右
右下
向下
左下
向左
左上
径向渐变模式下,线性角度控件已隐藏。本期聚焦于颜色停靠点与类型切换,不额外提供径向形状/中心位置配置。
多色停靠点管理
至少保留两个停靠点。支持新增、选择、删除与位置调整。
添加停靠点
删除当前停靠点
重置默认
当前停靠点位置
0
%
位置百分比
0%–100%
当前编辑对象
选中态高亮
停靠点 1
当前停靠点颜色编辑
每个停靠点均可通过 R / G / B 滑块独立编辑。
停靠点 1
rgb(255, 0, 128) · #FF0080
R
255
G
0
B
128
RGB
rgb(255, 0, 128)
HEX
#FF0080
位置
0%
CSS 代码输出
代码随配置即时更新,可一键复制到项目中直接使用。
准备就绪
复制 CSS