一个纯CSS实现的渐变背景，能让网页少发1次HTTP请求。对前端工程师来说，这是白捡的性能优化——但90%的人只会写最基础的线性渐变。
DevPlaybook最近更新的CSS渐变生成器，把三种渐变类型做成了可视化面板。用户拖动色标就能实时预览，不再需要对着文档猜角度。这个工具本身没什么新闻点，但它暴露了一个行业现状：大多数人把CSS渐变用得太保守了。
线性渐变：最被低估的方向控制
线性渐变（linear gradient，线性渐变）的本质是颜色沿直线过渡。DevPlaybook的界面把方向选择做成了可视化圆盘，但代码层面其实只有两种写法：关键词（to right/to bottom）或角度值（135deg）。
关键词适合快速原型，角度值才能精确复现设计稿。一个冷知识：135deg是从左下到右上的对角线，这是Material Design卡片背景的默认角度，也是目前UI设计中最安全的"高级感"来源。
多色标渐变有个陷阱。很多人把颜色均匀分布（0%、33%、66%、100%），结果中间出现明显的色带断层。解决方案是把关键色标稍微偏移，比如把33%改成30%，66%改成70%，让过渡区间有重叠，肉眼就看不到接缝了。
线性渐变的典型场景：Hero区域背景、按钮填充、进度条、分割线。但有个反直觉的用法——用它做条纹背景，只需要把相邻色标设为同一位置：
background: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 50%, #ccc 50%, #ccc 75%, transparent 75%);
这种写法零图片依赖，缩放不会模糊，比切图方案轻量得多。
径向渐变： spotlight效果的秘密
径向渐变（radial gradient，径向渐变）从中心点向外辐射，形状可以是正圆或椭圆。DevPlaybook的生成器允许拖拽定位中心点，这比手写at 50% 0%直观得多。
最常见的误用是把径向渐变当"光晕"用，结果整个页面像个舞台灯。更克制的做法是控制透明色标的位置——比如circle at 50% 0%配合transparent 60%，只在顶部边缘留一道高光，模拟玻璃反光。
椭圆变体有个细节：当容器是长方形时，ellipse会自适应拉伸，circle则保持正圆。这个区别在响应式布局里很关键，圆形头像边框必须用circle，否则手机端会变成椭圆。
径向渐变的性能陷阱在于重复渐变（repeating-radial-gradient）。虽然能做靶心图案，但渲染开销比普通渐变高一个数量级，移动端慎用。
圆锥渐变：被Chrome雪藏了3年的API
圆锥渐变（conic gradient，圆锥渐变）是三种类型中最年轻的，2018年才进入CSS规范，但直到2020年Chrome 83才默认开启。它的颜色围绕中心点旋转分布，天然适合做色轮和饼图。
DevPlaybook把这个功能放在了二级菜单，很多用户可能根本没展开过。但圆锥渐变的代码效率极高：一个loading spinner用conic-gradient配合mask属性，20行CSS就能实现，不需要SVG或Canvas。
饼图分段是圆锥渐变的杀手级应用。语法里的角度区间（0deg 120deg）直接对应数据比例，比用SVG path画扇形直观十倍。缺点是精度受限——如果要做30% vs 31%的精细对比，圆锥渐变的锯齿边缘会暴露。
一个尚未普及的技巧：圆锥渐变配合background-size可以生成重复的扇形图案，用来做雷达扫描效果或加载动画，帧率比GIF流畅得多。
生成器之外的硬规则
DevPlaybook在界面底部藏了三个设计提示，值得单独拎出来。
颜色数量控制在2-3个。超过3色的渐变容易显脏，除非刻意追求极光或日落效果。专业设计师的渐变往往只有两个色标，但会微调中间点的位置来制造"流动的错觉"。
色标分布要均匀。不等距色标会产生跳跃感，除非这是你想要的效果——比如模拟金属反光时，把高光色标压缩在10%的区间内。
对比度检查不能省。渐变背景上的文字经常踩雷，WCAG 2.1要求正文对比度至少4.5:1。DevPlaybook没有内置检测，需要用户手动用WebAIM的工具复核。
最后提一个反常识的事实：CSS渐变的渲染性能在复杂场景下可能不如小尺寸PNG。当渐变角度非45度倍数时，某些浏览器会产生锯齿，此时1KB的PNG反而更平滑。这个取舍没有标准答案，需要针对具体场景测帧率。
你最近一次用CSS渐变是什么时候？是随手抄了段UI框架的默认样式，还是真的调过色标位置？
热门跟贴