用 HTML 画出你想要的线性渐变

在网页设计里，把一张图、一种色系或两种颜色衔接自然，常靠线性渐变来“润色”。掌握好方向、停靠与停靠点，能做出既美观又实用的过渡，减少不必要的图片资源，也让页面更轻快。

从零开始：什么是线性渐变

HTML 中通过 CSS 的 linear-gradient 生成平滑的色彩过渡。想象在画布上用一张斜线把两种颜色自然衔接，这条线可以是任意角度，从而塑造出多种氛围：从冷到暖、从暗到亮、从饱和到透明，都由你来决定。

实战：方向、位置与停靠点

方向是渐变的“主轴”。常见有水平、垂直与对角，也可以自定义角度。比如 to right 表示向右渐变，等同于 0deg；而 135deg 会指向左上方。在 background 中写法是：

background: linear-gradient(direction, color-stop-1, color-stop-2);

停靠点控制颜色的过渡起点与终点位置。默认起点在 0%，终点在 100%。你可以用 from/to 指定起点，或用 from-top/to-bottom 等关键字。更灵活的是在两个颜色间插入停靠点，用百分比表示过渡的起点与过渡的终点：

background: linear-gradient(to right, red 0%, orange 50%, yellow 100%);

设计场景：渐变的用途与搭配

氛围色过渡：从深蓝到浅蓝的过渡，能营造出海天相接的宁静感，适合卡片背景或背景图过渡。

渐变按钮：从深色到亮色的过渡，让按钮更有层次与触感，提升点击反馈的质感。

渐变文字：用不同颜色的渐变填充文字，能增加视觉冲击力，常用于标题或标语。

进阶：渐变的性能与兼容

线性渐变本质上是 CSS 图层样式，不会额外加载图片，体积小、渲染效率高。在移动设备上表现稳定，绝大多数现代浏览器都支持，旧版浏览器的兼容问题可以借助 CSS 预处理器或 fallback 背景图处理。

小技巧：把渐变用在对的场景

• 卡片阴影过渡：给卡片添加从浅到深的渐变阴影，让元素有“浮出纸面”的层次。
• 背景动画：用从左到右或从上到下的渐变作为背景动效，让页面更有动态呼吸感。
• 过渡动画：把渐变作为过渡的中间态，让页面状态切换更平滑。

结尾：让渐变服务于设计

理解并掌握线性渐变的使用，不仅仅是添加一种样式，而是用它作为设计语言的一部分，让页面更柔和、更有层次。从单一的色阶过渡，到多色的渐变过渡，都应服务于功能与美观，避免为了渐变而渐变。在适当的位置用对颜色与方向，就能让页面在细节上更有“人味”。