DEV · GRADIENT
CSS渐变
设定颜色和角度，即时显示CSS代码与预览。
- 1.选择起始颜色和结束颜色
- 2.选择线性(linear)或径向(radial)类型
- 3.线性时用角度滑块调整方向
- 4.在右侧查看预览并复制生成的 CSS 代码
→ 结果: 渐变预览以及可复制的 CSS background 代码
预览
CSS代码
background: linear-gradient(135deg, #3d2566, #b69cff);
关于此工具
选定两种颜色和角度，即可生成可直接使用的 CSS `linear-gradient` 代码。可一边查看效果一边调整颜色与方向，省去反复改代码再刷新的往返。
适用场景
- —确定按钮或横幅的背景渐变并转为代码时
- —尝试用两种品牌色衔接的页头背景时
- —只调整角度、比较哪个方向更自然时
注意事项
- —仅生成两色线性渐变，不支持径向渐变或三个以上的色标。
- —饱和度差异很大的两色衔接时，中间可能出现发灰的过渡带；明度接近的颜色衔接更干净。
- —生成的代码为标准 CSS，无需前缀即可在现代浏览器中使用。