CSS 渐变无需 Stack Overflow——可视化生成并发布

你打开了一个新CSS文件，输入了 background:，然后盯着屏幕。你知道你需要一个渐变。你知道属性是 linear-gradient。你记不清角度是先出现还是后出现，是顺时针还是逆时针，或者你输入的颜色和你想象的完全不一样。

这篇文章解决了这个问题。我们将详细介绍CSS渐变的工作原理——语法、角度逻辑，以及你实际会用到的模式——并提供一个可视化生成器，让你不再猜测，而是直接投入使用。

linear-gradient 实际工作方式

基本语法是：

background: linear-gradient(direction, color-stop1, color-stop2, ...);

那 direction 是让人困惑的地方。你有两个选择：一个关键字或一个角度（以度为单位）。

关键字： to top, to bottom （默认值）， to left, to right，以及对角线： to top right, to bottom left星期几

度数： 0deg 向上（与 to top相同）。角度顺时针增加，因此 90deg 向右， 180deg 向下， 270deg 向左。

这里有一条值得记住的内容： 0deg = 向上，从那里顺时针开始。 其余部分都由此推导而来。

本周你将使用的六种模式

1. 从上到下（默认）

background: linear-gradient(to bottom, #667eea, #764ba2);

2. 逐渐变为透明

在图像上叠加文字？你需要底部为深色，顶部为透明。使用 transparent:

background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);

一个注意事项：在Safari中，当从有颜色值过渡时，避免使用 transparent ，因为它会经过黑色。改用相同RGB值的 rgba(r, g, b, 0) 。

3. 倾斜的英雄背景

background: linear-gradient(135deg, #f093fb 0%, #f5576c 50%, #fda085 100%);

135deg 大致是从左下到右上——一种经典的杂志封面角度。这种多停点渐变由每个颜色后的百分比位置定义。如果没有百分比，CSS会均匀分布这些颜色。

4. 轻微的卡片阴影

background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);

使用纯白色背景的卡片在白色页面上看起来很扁平。一个几乎看不见的从纯白色到极浅灰色的渐变能赋予它们深度，而不显得刻意。这才是人们注意不到的渐变，这才是重点。

5. 按钮叠加

background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);

从左到右（90deg）的渐变感觉更生动。搭配一个悬停状态，通过移动背景位置（使用 background-size: 200% 和过渡 background-position）实现按钮的平滑滑动效果。

6. 硬性颜色停止（无混合）

background: linear-gradient(90deg, #e74c3c 50%, #3498db 50%);

两个相同位置的颜色停止会产生一条清晰的线条，无混合。适用于分屏布局、进度条和条纹图案——所有这些都不需要额外元素或图片。

径向渐变：另一种

radial-gradient 从中心点向外辐射，而不是沿某个方向移动：

background: radial-gradient(circle at center, #a18cd1 0%, #fbc2eb 100%);

第一个参数是形状（circle 或 ellipse），然后是位置。 at center 是默认值。通过 at top left, at 30% 60%等调整焦点点。径向渐变非常适合用于聚光灯效果、发光按钮和径向页面背景。

没人记住的语法（以及如何永远不忘记它）

让开发者困惑的三件事，按频率排序：

• 角度在颜色之前 ——方向始终在颜色停止之前。
• 顺时针度数 — 90deg 向右，而不是向上。 0deg 向上。
• 透明到颜色的带状区域 ——浏览器在两端颜色不匹配RGBA值时会经过黑色。

如果你希望完全避免试错，使用 CSS 渐变生成器 在iotools.cloud上可以让你直观选择颜色，拖动停止点，翻转角度，并一键复制最终CSS。再也不用猜测 143deg 看起来是什么样子。

浏览器支持

linear-gradient 且 radial-gradient 在所有现代浏览器中都是标准支持——Chrome、Firefox、Safari和Edge都支持，无需前缀。2026年，你无需使用 -webkit- 前缀来书写标准的渐变语法。

唯一例外是较老的 -webkit-linear-gradient 语法，用于Safari 5.1和Chrome 10-25。除非你支持2012年及以前的浏览器，否则可以忽略它。

conic-gradient 具有强大的现代浏览器支持，但没有IE/旧版浏览器兼容性——仅在浏览器版本始终为最新时使用。

跳过语法——用视觉方式生成

CSS渐变语法并不复杂，但手动调整很繁琐。在iotools.cloud上的 CSS 渐变生成器 提供实时预览、拖动颜色停止点、线性或径向的输入控制，以及一键复制。通过视觉方式构建你的渐变，复制输出，直接发布。

你可能也会喜欢