CSS 渐变生成器

预设渐变模板

相关指南

颜色三件套：转换器怎么读十六进制、提取器看多少像素、渐变器什么时候给出坏 CSS
三个颜色页面用的是三台完全不同的机器。转换器把十六进制当 32 位整数移位取色，所以 #FF0000ff 变成蓝色、#12g456 变成近黑且不报错；提取器只抽检 5000 个像素，聚类中心每轮重掷随机数，所以你问它要 7 个色它可能只给 4 个；渐变器只有三个方向关键字，而且从「径向渐变」退回「线性渐变」会写出浏览器读不懂的 CSS。下面每个数字都是在页面上跑出来的。

常见问题

线性渐变和径向渐变有什么区别？
线性渐变（linear-gradient）沿一条直线方向过渡颜色，如从上到下、从左到右；径向渐变（radial-gradient）从中心点向外圆形扩散过渡颜色。选择哪种取决于你想要的效果——背景条、按钮常用线性渐变，光晕、聚光灯效果更适合径向渐变。

渐变中的颜色停止点（color-stop）是什么？
颜色停止点定义了渐变中某个位置的颜色值。通过调整每个停止点的位置百分比，可以控制颜色过渡发生的时机。多个停止点可以实现彩虹、条纹等复杂渐变效果，让颜色过渡更加丰富自然。