• 文档
• 教程
• 知识库

linear-gradient()是 CSS 内置的渐变函数，仅需一行代码即可为任意元素的背景填充平滑的线性渐变色，是现代 Web 界面设计中高频使用的基础视觉技巧。本文以 TIL 仓库 css/style-a-background-with-a-linear-gradient.md 中的两色渐变示例为起点，完整覆盖其核心用法，并延伸讲解渐变方向、角度、多色渐变、透明度与颜色停靠点等实战参数，帮助你在按钮、页面横幅、卡片等场景中直接落地可运行代码。

最简单的两色线性渐变

linear-gradient()在函数最简形式下，只需要传入两个颜色值，浏览器就会在默认的**垂直方向（从上到下）**上绘制一条平滑过渡的渐变。仓库原文给出的完整示例代码如下：

.container { background: linear-gradient(#00449e, #e66465); }

将这段样式应用到 HTML 后，所有带container类的元素，其背景都会从#00449e（深蓝）平滑过渡到#e66465（珊瑚红）。其中#00449e是渐变起点颜色（默认位于顶部），#e66465是渐变终点颜色（默认位于底部）。该声明写在background简写属性中，等价于把它交给background-image属性——渐变本质上被浏览器当作一张由函数生成的背景图像来处理。

配套的 HTML 结构只需要一个普通元素即可验证效果：

<div class="container">渐变背景示例</div>

你可以在 CodePen 等在线编辑器中直接粘贴这段 CSS 观察效果，也可以将.container替换成body、header等任意选择器，让整个页面或特定区块拥有渐变背景。

控制渐变方向：关键词与角度

默认的"从上到下"只是最简单的形态。linear-gradient()的第一个参数可以用来指定渐变的方向，常见写法有两种：

方向关键词——使用to加方位词组合：

/* 从左到右 */ .hero { background: linear-gradient(to right, #00449e, #e66465); } /* 沿对角线：从左上角到右下角 */ .diagonal { background: linear-gradient(to bottom right, #00449e, #e66465); }

角度值——使用deg单位精确控制方向，0deg表示从下到上，90deg表示从左到右，角度按顺时针递增：

.angled { background: linear-gradient(45deg, #00449e, #e66465); }

从实现原理看，linear-gradient()生成的是一条以指定角度穿越元素盒模型的渐变轴，颜色沿该轴的垂直方向依次过渡；未指定方向时，浏览器使用默认值180deg，即自上而下，这正是仓库原示例"垂直两色渐变"的由来。

多点渐变与颜色停靠位置

linear-gradient()并不局限于两个颜色，可以传入任意数量的颜色，浏览器会均匀地在它们之间插值过渡：

.sunset { background: linear-gradient(to right, #ff9a9e, #fad0c4, #a18cd1); }

还可以用**百分比（或长度）**显式指定某个颜色停靠点的位置，从而精细控制每种颜色出现的区域宽度：

.bar { background: linear-gradient( to right, #00449e 0%, #e66465 50%, #f8e9a1 100% ); }

上例中#00449e从0%处开始、#e66465在50%处、#f8e9a1在100%处结束，三个停靠点把渐变均匀切分为两个过渡区间。省略位置时，浏览器会将各颜色按等距规则自动分布。

让渐变带透明度：HSL、RGBA 与 alpha

渐变色同样可以携带透明度（alpha 通道），从而让渐变背景透出下层内容或叠加出层次感。仓库中的 css/define-hsl-colors-with-alpha-values.md 详细介绍了现代hsl()语法用斜杠分隔 alpha 值的写法，它可以与linear-gradient()直接组合：

.overlay { background: linear-gradient( to bottom, hsl(220deg 100% 50% / 0), hsl(220deg 100% 50% / 0.8) ); }

上面的写法会生成一个从完全透明到 80% 不透明度的蓝色渐变，常用于图片上方的文字可读性遮罩层。也可以使用rgba()达到同样效果：

.overlay { background: linear-gradient(to bottom, rgba(0, 68, 158, 0), rgba(0, 68, 158, 0.8)); }

渐变与其他背景技术组合使用

渐变本质上是一张"图像"，因此它可以与背景图片、纯色背景等机制协同工作，这正好呼应了仓库中另一篇笔记的用法——css/conditional-styling-for-unsupported-css-features.md 展示了@supports条件下background-image作为回退方案的写法。例如，可以给一张真实图片叠加半透明渐变以增强前景内容可读性：

.banner { background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("banner.png"); background-size: cover; }

同时，渐变也可以作为动态背景的基础：仓库中的 css/create-a-pulsing-background-with-css-animation.md 展示了用@keyframes在两种背景颜色间来回过渡的脉冲动画，而 css/animate-smoothly-between-two-background-colors.md 进一步解释了动画状态下浏览器如何自动插值。如果将animation与linear-gradient结合，即可做出渐变不断流动的视觉效果，这是页面横幅与品牌宣传区的常见设计手法。

快速参考：常用写法汇总

小结

从仓库原笔记出发，linear-gradient(#00449e, #e66465)这一行代码已经足以让元素获得美观的垂直两色渐变；而通过方向关键词、角度、多颜色与停靠点、alpha 透明度等参数，linear-gradient()可以覆盖横幅、按钮、遮罩、动态背景等绝大多数日常场景。结合本仓库 css 目录下的 HSL 语法、@supports回退与 CSS 动画等相邻主题，你可以把最简单的渐变扩展为一套完整的视觉设计工具链。

• 文档
• 教程
• 知识库