🌈 渐变生成器

常见问题

线性渐变的角度怎么理解？

CSS渐变的角度定义：0deg是从下到上（to top），90deg是从左到右（to right），180deg是从上到下（to bottom），270deg是从右到左（to left）。这个定义和几何上的角度（0度向右，逆时针增加）不同，是顺时针旋转的。简单记：90deg = 向右，角度增加 = 顺时针旋转。

渐变里可以加多少个颜色？

技术上可以加任意多个色标，但通常2-3个颜色就够了。颜色太多渐变会显得杂乱。彩虹渐变这种特殊效果除外。色标可以指定位置百分比，如red 20%, blue 80%，表示20%处是红色、80%处是蓝色，中间过渡。不指定位置时颜色均匀分布。第一个默认0%，最后一个默认100%。

浏览器对渐变的支持好吗？

线性渐变和径向渐变所有现代浏览器都支持，包括IE10及以上，兼容性很好。圆锥渐变（conic-gradient）是较新的特性，Chrome 69+、Firefox 83+、Safari 12.1+支持，IE不支持。如果需要兼容老浏览器，可以使用CSS前缀或考虑替代方案。使用时建议检查目标用户的浏览器版本。

怎么让渐变更有质感？

几个小技巧：1）使用低饱和度的颜色，高饱和的渐变容易显得廉价；2）叠加一层细微的噪点或纹理（用noise纹理图片或svg）；3）加上内阴影和高光，做出玻璃态效果；4）使用多色过渡而不是双色，中间加一个过渡色会更自然；5）尝试不常见的角度，120-150度和300-330度往往比标准的45度更有设计感。

渐变能加透明度吗？

可以！使用rgba()或hsla()颜色值就能实现带透明度的渐变。例如：linear-gradient(to right, rgba(79,70,229,1), rgba(79,70,229,0)) 就是从实色到透明的渐变。这种渐变常用于图片上叠加文字（底部渐变遮罩让文字更清晰）、或做渐变透明的边框/装饰。

怎么做出"硬边"渐变效果？

两个色标在相同位置就会产生硬边（没有过渡）。例如：linear-gradient(to right, red 50%, blue 50%) —— 左边50%纯红色，右边50%纯蓝色，中间一条明显的分界线。利用这个技巧可以做出双色背景、条纹图案、对角分割等效果。多个色标同位置还能做出多段分色效果。