CSS 渐变怎么写？linear-gradient、radial-gradient 和按钮背景指南

CSS 渐变可以不用图片就做出柔和背景、按钮高光和视觉层次。常见的 linear-gradient、radial-gradient 都能直接写在 CSS 里。

你可以用 CSS 渐变生成器 快速生成渐变代码。

常见写法

background: linear-gradient(135deg, #ffcc66, #ff7a18);

方向可以是角度，也可以是 to right、to bottom 这类关键词。

渐变要服务内容

渐变不是越艳越好。按钮和卡片背景要保证文字对比度足够，否则用户看不清。

如果用于正文区域，建议降低饱和度，避免干扰阅读。

多层背景

CSS 可以叠加多个背景，例如渐变加图片、渐变加纹理。复杂效果要注意性能和维护成本。

如果只是按钮高光，一层简单渐变通常足够。

设计系统里怎么用

如果一个网站里到处都是不同方向、不同颜色的渐变，界面会很快变乱。更稳的做法是把渐变当成少量可复用样式，例如主按钮、危险提示、会员标识或活动背景。这样既有视觉记忆，也方便后续维护。

渐变颜色最好来自品牌色或主题色，不要每个组件临时挑一组。深色文字放在浅渐变上，浅色文字放在深渐变上，按钮 hover 和 disabled 状态也要一起设计，否则交互时会显得突兀。

可访问性检查

渐变背景上的文字需要看最亮和最暗区域的对比。只在中间区域可读不够，因为响应式裁切、不同屏幕色彩和暗色模式都会影响观感。重要按钮和导航文字要优先保证清楚。

交付代码要可维护

生成渐变后不要只复制到一个页面里就结束。常用渐变可以放进 CSS 变量或组件样式里，例如 --gradient-primary。后续换品牌色、做暗色模式或统一按钮状态时，只改一处会轻松很多。

如果渐变用于大面积背景，还要检查压缩截图、低端屏幕和投影展示。过细的色阶和过亮的高光在不同设备上可能会出现色带，必要时可以降低对比或加一点纹理遮盖。

总结

CSS 渐变适合做轻量视觉效果，但要关注文字可读性和整体风格。

需要快速生成代码时，可以用 CSS 渐变生成器，再在真实组件里检查效果。