柔和的首屏渐变
CSS
.hero { background: linear-gradient(135deg, #6c8cff 0%, #b18cff 100%);}双色对角线渐变。独立 SaaS 产品首屏的经典风格，看着舒服，放文字也清晰。
CSS 渐变生成器
可视化设计 CSS 渐变，实时输出代码。
最后更新
准备好真正学会编程了吗？
Coddy 让你在浏览器里编写真实代码来学习：互动课程、即时反馈，卡住时还有 AI 帮忙。
CSS 渐变生成器是什么？
CSS 渐变生成器是 CSS 中 linear-gradient、radial-gradient 和 conic-gradient 函数的可视化编辑器。它让你不必手动输入色标：在轨道上拖动颜色，观察预览变化，然后复制可直接放进样式表的 CSS 代码。
渐变在现代界面中无处不在：首屏横幅、卡片遮罩、按钮状态、发光效果、深色模式下的细腻层次、加载骨架屏和装饰性边框。会手动读写渐变能让你效率更高，但要快速尝试想法，可视化生成器无可替代。
CSS 支持三种渐变。线性渐变沿任意角度的直线变化。径向渐变从一个点向外以圆形或椭圆形扩散。锥形渐变像钟面一样围绕中心点旋转着变换颜色。每种渐变都有自己的用武之地，你还可以在同一个背景上叠加多个渐变。
设计渐变时你会学到什么
- 一个渐变由“方向”（或形状）和“色标”定义，色标就是可以附带位置的颜色。
- 两个色标放在同一位置会形成“硬边”，适合做条纹或分割背景。
oklch这类现代色彩空间生成的渐变比rgb或hsl更平滑，在视觉上也更均匀。- 在 CSS 中渐变就是图像，凡是
background-image、border-image、mask-image或filter接受图像的地方，都可以使用它。
一步步制作 CSS 渐变
选择渐变类型
想要沿直线过渡就选线性，想要圆形淡出就选径向，想要围绕中心点旋转就选锥形。
设置角度或位置
线性渐变要选一个角度（在 CSS 中
0deg表示从下到上）。径向和锥形渐变则设置中心位置。添加并排列色标
想加多少种颜色都可以。沿轨道拖动每个色标来改变它的位置。两个色标放在同一位置会形成硬边。
在真实形状上预览
在全宽横幅、卡片和按钮之间切换，看看渐变在不同宽高比下的效果。
复制 CSS
复制可直接上线的
background声明，粘贴到你的样式表中。
CSS 渐变速查表
三种渐变函数，以及写在函数里的各个部分。完整参考见 MDN：linear-gradient、radial-gradient、conic-gradient。
| 函数 | 作用 | 示例 |
|---|---|---|
linear-gradient | 颜色沿直线过渡 | linear-gradient(135deg, #6c8cff, #b18cff) |
radial-gradient | 颜色从一个点向外扩散 | radial-gradient(circle at 30% 20%, #fff, #000) |
conic-gradient | 颜色围绕中心旋转 | conic-gradient(from 0deg, red, yellow, red) |
repeating-linear-gradient | 平铺的条纹图案 | repeating-linear-gradient(45deg, #000 0 10px, #fff 10px 20px) |
| 色标 | 可以附带位置的颜色 | #6c8cff 25% |
| 硬边色标 | 同一位置写两次 → 锐利边缘 | #000 50%, #fff 50% |
| 多重渐变 | 在一个元素上叠加 | background: g1, g2, g3; |
可以动手试试的 CSS 渐变示例
径向聚光效果
CSS
.card { background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.15), transparent 40%), #1f2230;}在纯色上叠加一层半透明的径向高光，模拟柔和的光源，非常适合深色模式下的卡片。
硬边条纹
CSS
.stripes { background: repeating-linear-gradient( 45deg, #1a1a1a 0 12px, #2a2a2a 12px 24px );}两个色标放在同一位置会形成锐利的边缘。用 repeating-linear-gradient 包起来，图案就会平铺。
CSS 渐变的常见错误
- 色标用得太多。通常三到四个就够了，再多往往会让效果变脏。
- 忘了在 CSS 渐变中
0deg表示从下到上（很多设计工具里 0° 指向右边，两者不同）。 - 在高对比度的渐变上放文字，却没有检查两端的可读性。要记得 WCAG 对比度要求。
- 直接给
background-image做动画。大多数浏览器不会在渐变之间平滑插值，应该改为给background-position做动画，或对共用的变量使用过渡。 - 把渐变拉伸到非常宽的元素上，却没考虑色带问题。加入中间色标，或使用
oklch让过渡更平滑。
CSS 渐变常见问题
怎么创建 CSS 渐变？
把
linear-gradient、radial-gradient 或 conic-gradient 作为 background 或 background-image 属性的值。每个函数都接收一个方向（或中心点）和一组色标。线性、径向和锥形渐变有什么区别？
线性渐变让颜色沿直线过渡。径向渐变从一个点以圆形或椭圆形向外扩散。锥形渐变像钟面一样围绕中心点旋转着变换颜色。
CSS 渐变可以做动画吗？
浏览器不会在渐变图像之间平滑插值。常用的技巧有：给
background-position 做动画，让渐变移动起来；用透明度在两层渐变之间过渡；或者对用作色标的 CSS 自定义属性做动画。为什么我的渐变有色带？
当很宽的区域里只有很少的离散色阶时，就会出现色带。可以加入中间色标，换用
oklch 这类感知均匀的色彩空间，或叠加一层细微的抖动噪点。所有浏览器都支持 CSS 渐变吗？
线性和径向渐变得到了全面支持。锥形渐变在所有现代浏览器中都可用。如果要兼容非常老的浏览器，可以在渐变声明之前加一个纯色的
background-color 作为后备。