星点博客 CSS 渐变生成器 - 在线生成 linear-gradient/radial-gradient 代码
1434 字
7 分钟
CSS 渐变生成器 - 在线生成 linear-gradient/radial-gradient 代码
🌟 CSS 渐变怎么快速写出来
按钮、卡片、Banner 常用渐变背景。手写 linear-gradient 要反复调角度和色标，改一次看一次。星点CSS 渐变生成器把这件事可视化：拖节点、调角度，实时预览，一键复制代码。
🎨 三种渐变类型
| 类型 | CSS 函数 | 效果 |
|---|---|---|
| 线性 | linear-gradient | 沿一条直线过渡 |
| 径向 | radial-gradient | 从中心向外扩散 |
| 锥形 | conic-gradient | 绕中心旋转过渡 |
🚀 怎么用（详细步骤）
- 打开CSS 渐变生成器；
- 选择渐变类型；
- 添加/删除颜色节点，拖动节点调整位置；
- 调整角度（线性）或形状/位置（径向/锥形）；
- 实时预览满意后，复制生成的 CSS。
🧭 线性渐变语法
background: linear-gradient(方向, 颜色1 位置1, 颜色2 位置2, ...);- 方向：
to right、to bottom right或角度45deg； - 角度规则：
0deg指向上，顺时针增加，90deg指向右； - 位置：百分比或长度，可省略（自动均匀分布）。
代码示例
45° 双色：
background: linear-gradient(45deg, #409eff, #7c3aed);三色带位置：
background: linear-gradient(90deg, #ff0000 0%, #ffff00 50%, #00ff00 100%);硬边分色（两个色标同位置）：
background: linear-gradient(90deg, #000 0 50%, #fff 50% 100%);透明遮罩：
background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0));重复条纹：
background: repeating-linear-gradient(45deg, #eee 0 10px, #ddd 10px 20px);🔵 径向与锥形渐变
径向（聚光灯）：
background: radial-gradient(circle at 30% 20%, #ffffff, #1f2937 60%);锥形（饼图/进度环）：
background: conic-gradient(#409eff 0 25%, #e5e7eb 25% 100%);🖼 从图片提取渐变
如果你有一张喜欢的渐变图，可以用图片颜色工具提取主色，再把颜色填进渐变生成器，复刻出接近的效果。
💡 实用案例
| 效果 | 代码 |
|---|---|
| 品牌按钮 | linear-gradient(135deg, #409eff, #7c3aed) |
| 天空背景 | linear-gradient(to bottom, #87ceeb, #ffffff) |
| 图片底部遮罩 | linear-gradient(to top, rgba(0,0,0,.7), transparent) |
| 进度环 | conic-gradient(#409eff 0 70%, #eee 70% 100%) |
| 光晕 | radial-gradient(circle, rgba(64,158,255,.4), transparent 70%) |
⚠️ 小提示
- 对比度：渐变背景上的文字要在最浅/最深处都看得清，可用对比度检测核对；
- 性能：复杂渐变（大量色标）渲染成本略高，够用即可；
- 兼容：
linear-gradient现代浏览器均支持；锥形渐变在旧浏览器可能不支持； - 感知均匀：现代浏览器支持
linear-gradient(in oklab, ...)，中段过渡更自然。
❓ 常见问题（FAQ）
生成的代码能直接用在项目里吗？
可以，复制 `background: ...` 即可，支持现代浏览器。可以加多少个颜色节点？
支持多节点，按需添加即可。能做透明渐变吗？
可以，把节点的颜色设为带透明度的 RGBA 即可，常用于图片遮罩。支持 Tailwind 吗？
CSS 渐变代码可自行套用；颜色代码（含 Tailwind）可用[颜色格式转换](https://www.xingdian.net/app/color/convert/)获取。角度 0deg 是哪个方向？
0deg 向上，顺时针：90deg 向右，180deg 向下，270deg 向左。怎么做硬边分色？
让两个色标停在同一位置，如 `#000 50%, #fff 50%`。锥形渐变能做饼图吗？
能，用"颜色 + 起止百分比"的色标即可，如 `conic-gradient(#409eff 0 25%, #eee 25% 100%)`。渐变会不会影响性能？
大量色标或大面积的复杂渐变会略增渲染成本，普通使用可忽略。🧪 更多渐变案例
玻璃拟态背景
background: linear-gradient(135deg, rgba(255,255,255,.2), rgba(255,255,255,.05));backdrop-filter: blur(10px);霓虹文字背景
background: linear-gradient(90deg, #ff00cc, #3333ff);-webkit-background-clip: text;color: transparent;网格/条纹
background: repeating-linear-gradient(0deg, #eee 0 1px, transparent 1px 20px), repeating-linear-gradient(90deg, #eee 0 1px, transparent 1px 20px);顶部高光
background: radial-gradient(ellipse at top, rgba(255,255,255,.35), transparent 60%), linear-gradient(#409eff, #2563eb);进度条
background: linear-gradient(90deg, #22c55e 0 70%, #e5e7eb 70% 100%);🌈 渐变中的色彩空间
默认渐变在 sRGB 中插值，某些配色中段会发灰。现代浏览器支持指定插值空间：
background: linear-gradient(in oklab, #409eff, #f59e0b);in oklab 让过渡更接近人眼感知，蓝→橙不会经过灰。这是近年的新特性，旧浏览器会忽略并回退到 sRGB。
⚙️ 动效与渐变
- 渐变按钮悬停：可切换背景位置或换一组色标；
- 渐变位移：
background-size: 200%+ 动画background-position实现流光； - 注意性能：大面积渐变动画在低端设备可能掉帧。
🧾 渐变语法速查
| 写法 | 含义 |
|---|---|
linear-gradient(45deg, a, b) | 线性，45° |
linear-gradient(to right, a, b) | 线性，从左到右 |
radial-gradient(circle, a, b) | 径向，圆形 |
radial-gradient(circle at 30% 20%, a, b) | 径向，指定中心 |
conic-gradient(a, b, c) | 锥形 |
repeating-linear-gradient(...) | 重复条纹 |
... in oklab, ... | 指定插值色彩空间 |
🔗 相关工具
🧭 更多常见问题
渐变背景上文字看不清怎么办？
在渐变最浅/最深两端分别用[对比度检测](https://www.xingdian.net/app/color/contrast/)，取较差的一端优化。能导出为 Tailwind 吗？
CSS 渐变可自行套用；颜色代码可用[颜色格式转换](https://www.xingdian.net/app/color/convert/)获取。渐变能做动画吗？
可以，用 `background-size` + `background-position` 动画实现流光效果。为什么渐变中段发灰？
sRGB 插值经过低饱和区，可用 `in oklab` 改善。支持旧浏览器吗？
`linear-gradient`/`radial-gradient` 支持广泛；`conic-gradient` 与 `in oklab` 在旧浏览器可能不支持。渐变节点有数量限制吗？
没有硬限制，但过多会影响可读性与渲染，够用即可。💬 总结
CSS 渐变生成器把”调渐变”从试错变成可视化操作：选类型、拖节点、调角度、复制代码。需要从图片还原渐变，配合图片取色与主色提取取色即可。
立即体验：访问 CSS 渐变生成器
文章分享
如果这篇文章对你有帮助，欢迎分享给更多人！
相关文章 智能推荐
1
linear-gradient 怎么用 - 线性渐变语法与角度详解
颜色工具 CSS linear-gradient 怎么用？本文详解线性渐变语法：方向/角度、颜色停止点、多色渐变、透明渐变与常见写法，附可直接复制的代码。在线 CSS 渐变生成器一键出代码。
2
配色方案生成器 - 互补色/类似色/三角色在线生成
颜色工具 配色方案怎么定？本文解释互补色、类似色、三角色、分裂互补、单色等色彩关系，并介绍在线配色方案生成器：选一个基色即可生成整套和谐配色，支持锁定与导出。
3
在线颜色选择器 - 免费取色/调色/多格式颜色代码工具
颜色工具 在线颜色选择器：色相/饱和度/明度面板实时取色，HEX、RGB、HSL、HSV、CMYK 多格式同步，支持多点取色与一键复制。含颜色格式详解、调色技巧、色彩理论与 FAQ，适合前端开发与设计配色。
4
radial-gradient 和 conic-gradient 怎么用 - 径向与锥形渐变
颜色工具 CSS radial-gradient（径向）与 conic-gradient（锥形）怎么用？本文详解形状、位置、大小与色标语法，附聚光灯、圆形进度、饼图等实用示例。在线 CSS 渐变生成器一键出代码。
5
随机颜色生成器 - 随机 HEX/RGB/渐变/调色板（附条件生成）
颜色工具 随机颜色生成器：一键生成随机 HEX/RGB/HSL、随机渐变、随机调色板，支持柔和/Pastel/深色/浅色/高饱和等风格，以及按色相/明度/饱和度范围条件生成。在线免费。
随机文章 随机推荐