已更新9月 2026
如何使用CSS 渐变生成器
- 选择你的颜色 - 从两种开始；相邻色调混合得最干净。
- 设置方向 - 135 度之类的角度，或从中心向外的径向角度。
- 观看实时预览并迭代 - 手动编辑的整个要点。
- 将 CSS 复制到样式表中作为元素的背景。
CSS 渐变生成器是什么？
CSS 渐变生成器直观地构建 linear-gradient() / radial-gradient() 代码：选择颜色和方向、观看实时预览、复制 CSS。它编写的语法 — background: Linear-gradient(135deg, #667eea 0%, #764ba2 100%) — 易于阅读，但手动迭代很乏味；视觉循环使得尝试十个变体需要一分钟。
渐变赢得了它们的普遍性：它们为零字节的图像下载添加了深度和修饰，无损缩放到任何尺寸，并以位图背景无法做到的方式进行动画/适应。现代设计中的每个英雄部分、按钮发光和卡片背景都是几个渐变点。
关于CSS 渐变生成器
选择两种或多种颜色，设置角度或方向，实时观看预览更新，并复制可用于生产的 CSS。
为看起来设计而不是默认的渐变制作注释：相邻色调干净地混合（蓝色→紫色，橙色→粉色），而相反的颜色（红色→绿色）穿过泥泞的灰色中点 - 如果您必须穿过方向盘，则经过第三个站点；微妙的背景比响亮的背景（相同色调的两种色调读作深度，霓虹彩虹读作 2010）； 135deg（从左上到右下）是 UI 表面最讨人喜欢的默认方向。
超越背景：渐变填充文本（通过背景剪辑）、绘制边框（边框图像或填充包装）以及通过覆盖层对照片进行着色。复制的代码在任何地方都适用 - 现代浏览器都支持通用，不需要前缀。
常见问题解答
background: Linear-gradient(135deg, #color1, #color2) — 先角度（0deg 向上，90deg 向右），然后颜色按顺序停止。颜色后面的百分比控制每个停靠点的位置。
这两种颜色位于色轮上（红→绿，橙→蓝），它们之间的直接 RGB 路径穿过灰色。修复：在泥浆周围插入中间停止线，或选择更接近的色调。
方向表面的线性（英雄、按钮、卡片）；径向用于中心发光效果（聚光灯、球体、晕影）。线性覆盖了 90% 的 UI 使用。
色带——在较长的微妙过渡过程中显示的颜色太少。缓解措施：缩短渐变距离，选择稍远的停止点，或覆盖微弱的噪点纹理。在现代屏幕上不太常见。
不是颜色直接停止（CSS 还不能在所有浏览器中转换它们），但经典的方法有效：在超大渐变上设置背景位置动画以获得移动光泽，或交叉淡入淡出两个渐变层的不透明度。