纯CSS渐变最稳妥，优先用background: linear-gradient(to right, #3b82f6, #10b981)，注意background-size、深色模式适配、SVG/Canvas上下文、无障碍对比度及性能问题。
如何在CSS中直接写渐变色，避免工具类库的冗余依赖
纯CSS实现渐变色最稳妥，尤其当你只需要几处背景、按钮或分割线时。引入工具类库（比如Tailwind的bg-gradient-to-r）反而增加打包体积，且容易和设计系统脱节。
常见错误是复制粘贴在线生成器的冗长代码，漏掉background-size或background-position导致平铺错位；还有人用linear-gradient(45deg, ...)却没设background-repeat: no-repeat，结果在小元素上反复渲染出条纹。
- 优先用
background: linear-gradient(to right, #3b82f6, #10b981)——方向关键词比角度更易读、兼容性更好（IE10+都支持to right） - 渐变色块高度不足时加
background-size: 200% 200%+background-position: 50% 50%，防止色带被裁切 - 深色模式下记得用
@media (prefers-color-scheme: dark)重置渐变起止色，否则浅色渐变在黑底上直接失效
用PostCSS插件自动注入渐变工具类，而不是手写重复规则
当项目里渐变使用频次高（比如卡片hover、状态标签、进度条），硬编码每个background会失控。这时该用PostCSS插件，而非引入整套UI框架。
典型场景：设计规范定义了5个主渐变色值，但开发要手动写10+种组合（水平/垂直/对角线 + 不同起止色），维护成本爆炸。
立即学习“前端免费学习笔记（深入）”；
- 推荐
postcss-css-variables配合自定义变量，把渐变声明抽成--grad-primary: linear-gradient(to right, #3b82f6, #10b981)，再用background: var(--grad-primary) - 如果必须用工具类名，用
postcss-utility-classes生成.bg-grad-blue-green这类类名，比Tailwind的通用类更轻量、命名更可控 - 注意：所有生成的工具类必须加
!important标记（如background: var(--grad-primary) !important），否则会被组件内联样式覆盖
渐变色在SVG和Canvas中失效？检查渲染上下文和单位
SVG的<defs></defs>里定义<lineargradient></lineargradient>后，在<rect></rect>上用fill="url(#myGrad)"没问题；但一旦把这个SVG作为background-image嵌入CSS，渐变就常变成纯色——根本原因是URL引用路径在CSS上下文中失效。
另一个坑是Canvas绘图：用ctx.createLinearGradient(x0, y0, x1, y1)时，坐标是相对于Canvas画布本身，不是页面视口；若Canvas被缩放或设置了width/height属性与CSS尺寸不一致，渐变会严重偏移。
- SVG作背景图时，把
<lineargradient></lineargradient>内联进SVG字符串，避免外部引用；或者改用CSSbackground: linear-gradient(...)模拟 - Canvas中用
canvas.width和canvas.height（非CSS尺寸）计算createLinearGradient参数 - 移动端Canvas高频重绘时，把
createLinearGradient结果缓存为变量，别每次fillStyle = gradient都重新创建
渐变色无障碍问题：对比度不足和动画闪烁风险
WCAG 2.1要求文本与背景的对比度≥4.5:1，但渐变背景天然破坏这一条件——比如从#ffffff到#f0f9ff的浅蓝渐变，中间区域可能让黑色文字完全不可读。
更隐蔽的是background-image: linear-gradient(...)配合transition: background 0.3s，某些浏览器（特别是旧版Safari）会在过渡中短暂显示纯色背景，造成视觉闪烁。
- 用
background: linear-gradient(...), #3b82f6设置兜底纯色，确保渐变加载失败或禁用时仍有可用背景 - 文字叠加在渐变上时，强制加
text-shadow: 0 1px 2px rgba(0,0,0,0.2)或半透明白色遮罩层，别依赖渐变自带“可读性” - 禁止对
background-image做CSS transition；如需动效，改用mask-image或clip-path控制显隐
渐变不是装饰糖，它是有渲染成本、可访问性代价和上下文依赖的视觉层。用之前先问一句：这个渐变是否真的不可替代？还是只是因为Figma里看起来很酷？
