CSS渐变函数是怎么工作的
CSS渐变不是图片文件,而是浏览器在绘制页面时实时计算出来的“生成图像”。所以它可以写进 background 或 background-image, 在任何分辨率下都清晰,也不会多出一次文件请求。最常用的有三种:
- linear-gradient:颜色沿一条直线变化,按钮、横幅、区块背景最常见。
- radial-gradient:从一个点向外呈圆形或椭圆形扩散,适合聚光灯和柔和的暗角效果。
- conic-gradient:围绕中心点按角度转一圈,用于饼图、色环和金属质感。
基本写法是 linear-gradient(角度, 颜色1, 颜色2)。在颜色后面加上 40% 这样的位置,表示该颜色在这个位置达到100%;不写位置则均匀分布。 如果让相邻两种颜色的位置相同,过渡就会消失,变成边缘清晰的条纹。
角度与方向关键字对照表
角度按顺时针增加,0度朝上,90度朝右。因此 90deg 表示第一种颜色在左、最后一种颜色在右。省略角度时默认是 to bottom(即180度)。
| 角度 | 方向关键字 | 颜色走向 |
|---|---|---|
| 0deg | to top | 从下到上 |
| 45deg | to top right | 从左下到右上(以正方形为准) |
| 90deg | to right | 从左到右 |
| 135deg | to bottom right | 从左上到右下(以正方形为准) |
| 180deg | to bottom | 从上到下(省略角度时的默认值) |
| 225deg | to bottom left | 从右上到左下(以正方形为准) |
| 270deg | to left | 从右到左 |
| 315deg | to top left | 从右下到左上(以正方形为准) |
to top right 这类角落关键字会随元素的宽高比自动调整角度,所以在长方形上并不严格等于45度。若希望在任何尺寸下倾斜度都一致,请使用数值角度。
选色时需要注意什么
默认情况下,浏览器按RGB数值在两种颜色之间做直线插值。把色环上相对的两种颜色(比如蓝色和橙色)混合,中间往往会变成发灰发暗的颜色。 解决办法是自己再加一个中间色,或者选色环上更接近的颜色。本工具的“使用第三种颜色”就是为此准备的。较新的浏览器还支持用linear-gradient(in oklch, ...) 指定插值色彩空间,但支持情况仍在变化,实际使用前请确认目标浏览器是否支持。
如果不确定怎么搭配,可以先用配色方案生成器挑出候选颜色;需要在HEX、RGB、HSL之间切换时,可以用颜色代码转换器。
验算示例:从金色到深蓝
本页默认颜色是 #c9a961(金色)和 #1a1a2e(深蓝),按RGB取平均得到的中间色为 #726248。 用WCAG相对亮度公式计算,白色和黑色文字放在这三种颜色上的对比度如下:
| 背景色 | 白色文字 | 黑色文字 | 更合适的文字色 |
|---|---|---|---|
#c9a961 | 2.25:1 | 9.33:1 | 黑色 |
#726248 | 5.91:1 | 3.56:1 | 白色 |
#1a1a2e | 17.06:1 | 1.23:1 | 白色 |
可见金色一端适合黑字,深蓝一端适合白字,麻烦出在中间。渐变让同一个元素里的背景亮度连续变化,文字落在哪里,可读性就不同。 在渐变上放文字时,应以最不利的位置(通常是中间)的对比度为准。本例中间色上白字为5.91:1、黑字仅3.56:1,所以用白字更稳妥;而金色一端用白字只有2.25:1。 需要更精细的检查,可以用对比度检查器。
按用途设计的要点
- 按钮:从上到下(180度)由亮色过渡到稍深的颜色,会有立体感。两端亮度差要小,否则按钮上的文字有一端会看不清。
- 首屏横幅:135度左右的对角方向,在宽高比变化时看起来依然自然。标题尽量靠近最深(或最浅)的一侧以保证对比度。
- 卡片与分区:同一色相、仅明度略有变化的两种颜色最稳。醒目的对比色只留给一处点缀。
- 聚光灯与暗角:用radial,中心亮、边缘暗,视线会聚到中间。
- 饼图与色环:用conic并以百分比指定色标位置,就能画出环形图的各段;起始角度可以写成
from 90deg。
如何读懂生成的代码
background: linear-gradient(90deg, #c9a961, #8a6d3b, #1a1a2e); 的意思是“从左到右,依次由金色、偏褐的金色过渡到深蓝”。三种颜色分别位于0%、50%、100%。 改写成 #c9a961 0%, #8a6d3b 30%, #1a1a2e 100%,中间色就会偏向左边,亮的部分变短、暗的部分变长。 输出最上面的 background: #c9a961; 是给无法解析渐变的环境准备的备用颜色,只要下一行有效,就会覆盖它。
常见错误与解决办法
- 文字看不清:整块渐变只用一种文字色,必然在某一端失效。可以在文字底下加一层半透明的深色遮罩,或把渐变的颜色集中到文字所在的一侧。
- 出现色带:两种相近的颜色铺在很大面积上,可能出现阶梯状色带。适当拉开颜色差距,或叠加极淡的噪点纹理可以缓解。
- 手机上背景异常:长页面使用
background-attachment: fixed时,部分移动浏览器会忽略或变卡,建议改用单独的固定图层。 - 与图片的叠放顺序:
background里用逗号写多个值时,先写的在上层。想在照片上盖一层渐变,就把渐变写在前面。 - 忘记备用色:要兼顾很旧的环境,就在渐变前加一行纯色
background。本工具生成的代码已经包含基于起始色的备用行。
如何使用生成的结果
把复制的代码直接粘贴为样式表中 background(或 background-image)的值即可。如果多处使用同一渐变,建议定义成 --brand-gradient 之类的CSS变量, 以后改颜色只需改一行。渐变文字是另一种技巧,需要 background-clip: text 加透明文字色,可以在本工具输出的基础上追加。即便如此,也要确认最亮和最暗的部分与页面背景都有足够的对比度。
本工具的局限
本工具把2~3种颜色均匀排布,不支持颜色位置(%)、重复渐变以及径向渐变中心位置和大小等细节设置。需要时请直接在生成的代码里补充,例如在颜色后加 40%,或写 at top left。 颜色输入使用浏览器自带的取色器,不含透明度(alpha),半透明颜色需要手动写进代码。
常见问题
可以加入3种以上的颜色吗?
本工具最多生成3种颜色。需要4种以上时,在生成的代码里用逗号继续追加颜色即可,并可在每个颜色后加百分比来控制它占据的范围。
支持径向渐变(radial-gradient)吗?
支持。在“类型”里选radial,会输出 radial-gradient(circle, 颜色1, 颜色2)。想要椭圆而不是正圆,删掉 circle 或改成 ellipse 即可。径向渐变不使用角度滑块。
0度和360度是一样的吗?
一样。转一整圈是360度,所以360deg与0deg方向相同,这也是滑块两端效果一致的原因。
使用渐变会拖慢页面吗?
正常尺寸的背景渐变几乎没有负担。但在很大的面积上叠加多层,或持续做动画,在低端设备上可能吃力。需要动效时,优先考虑改变透明度或位置这类较轻的属性。
可以用rgb()或hsl()代替HEX吗?
可以,渐变里的颜色可以写HEX、rgb()、hsl()。本工具因为取色器的特点输出HEX;需要其他写法时,先用颜色代码转换器转换再放进代码。
复制按钮没有反应怎么办?
在非HTTPS页面或应用内置浏览器等环境中,剪贴板访问可能被限制。此时请直接选中屏幕上显示的代码手动复制。