设计工具
颜色选择器
选择并提取 HEX、RGB、HSL 颜色值
设计工具
渐变色生成器
可视化创建漂亮的 CSS 线性或径向渐变
工具面板
本地处理关于渐变色生成器
线性渐变的可视化编辑：颜色、方向、色标实时预览，输出可直接粘贴的 background 声明。
- 1
生成的是**两色线性渐变**：`linear-gradient(方向, 起色, 止色)`。方向提供右、下、45°、135° 四种——斜向用角度写而不是 `to top right`，是因为角度的结果可预期（`to …` 的端点会随元素宽高比变化）。
- 2
两个颜色既可以用取色器挑，也可以直接粘 hex；预览随任一改动实时更新。
- 3
输出就是一行 `background`，贴到任何选择器上都能用。
- 1
选方向
右/下对应最常见的横向与纵向；45° 与 135° 是两条对角。
- 2
调两个颜色
取色器与 hex 输入同步；默认这组（玫红 → 蓝）对比足够，适合做按钮与卡片底。
- 3
复制 background
一行搞定，不用再拼渐变的语法。
本工具只生成两色线性。CSS 本身支持任意多色标与位置（`linear-gradient(to right, #a, #b 50%, #c)`），也支持 `radial-gradient` / `conic-gradient`——复制出去后在两个颜色之间插入 `, #xxx 50%`，位置用百分比控制即可。
那是 8 位色深下的量化台阶，渐变越平缓越明显。常用对策有两个：在两个颜色之间加一个中间色标（例如 `#b 50%`）让过渡更细，或叠一层极轻的噪点（SVG `feTurbulence` 或半透明噪点图片）打散台阶。浏览器端没有更彻底的解法。
相关工具
查看全部设计工具
颜色对比度
检查前背景色对比是否符合的可访问性标准
设计工具
设计工具
CSS 阴影生成器
可视化调节并复制 box-shadow 代码
设计工具
设计工具
单位换算
各领域物理单位的精准换算
设计工具
设计工具
字节转换
在 B, KB, MB, GB, TB 间进行转换
设计工具
设计工具
CSS 圆角生成器
可视化调节四角圆角并复制 border-radius 代码
设计工具
设计工具
CSS 裁剪路径生成器
拖动顶点调整形状，复制 clip-path: polygon() 代码
设计工具
设计工具
CSS 缓动函数生成器
拖动控制点编辑 cubic-bezier 曲线，复制缓动代码
设计工具