本地安全处理免费工具
CSS 渐变生成器
直观的可视化渐变调色板，提供角度控制、多色阶微调与丰富的现代设计预设模板，支持一键导出渐变背景与渐变边框代码。
生成渐变背景代码，适用于按钮、卡片与页面区块。
实时渐变背景预览
精选高颜值渐变预设
渐变角度控制 (90°)
色标调配 (Color Stops)
0%
100%
background: linear-gradient(90deg, #0ea5e9 0%, #6366f1 100%);
bg-gradient-to-r from-[#0ea5e9] to-[#6366f1]
CSS 与 Tailwind 渐变常见写法速查表
| 需求 | 原生 CSS 写法 | Tailwind CSS 类名 | 说明 |
|---|---|---|---|
| 水平双色渐变 | background: linear-gradient(90deg, #0ea5e9, #6366f1); | bg-gradient-to-r from-[#0ea5e9] to-[#6366f1] | 最常用水平过渡 |
| 三色对角渐变 | background: linear-gradient(45deg, #f72585, #7209b7, #4cc9f0); | bg-gradient-to-tr from-[#f72585] via-[#7209b7] to-[#4cc9f0] | 科技风赛博霓虹 |
| 径向中心扩散 | background: radial-gradient(circle, #ff0000, #0000ff); | bg-[radial-gradient(circle,#ff0000,#0000ff)] | 聚焦视觉焦点 |
| 渐变边框（支持圆角） | border: 4px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(...) border-box; | —— | 推荐方案，border-radius 正常生效 |
| 渐变文字 | background: linear-gradient(...); -webkit-background-clip: text; color: transparent; | bg-gradient-to-r ... bg-clip-text text-transparent | 让标题呈现渐变色 |
下表写法均为本工具可直接导出的标准语法与实用类，复制即可使用。
使用指南
- 1在色阶控制轴上点击添加色标，或者拖拽调整色标位置。
- 2旋转角度滑块或输入角度（0° - 360°）调整渐变流向。
- 3需要渐变边框时切换到“渐变边框”标签，调整边框宽度与圆角。
- 4从左侧预览框确认实际效果，满意后点击复制对应的 CSS 代码。
原理解析与标准规范
CSS 渐变（Gradients）是在两个或多个指定的颜色之间显示平稳过渡的视觉效果。CSS 定义了线性渐变（Linear Gradients）和径向渐变（Radial Gradients）。使用 CSS 渐变代替背景图片能显著减少页面网络加载时间，并且无论屏幕缩放多大都不会失真。
常见问题解答 (FAQ)
生成的 CSS 渐变代码是否兼容现代主流浏览器？
是的。现代浏览器（Chrome、Edge、Safari、Firefox）均原生全面支持标准 CSS3 linear-gradient 语法，无需添加任何浏览器私有前缀。
我可以添加两个以上的颜色进行混合渐变吗？
完全可以。本工具支持无限添加色标（Color Stops），并可以为每个色标单独设定色彩和百分比位置。
CSS 渐变边框怎么写？
推荐双层背景加 background-clip 的写法：border: 4px solid transparent; background: linear-gradient(#fff, #fff) padding-box, 你的渐变 border-box; —— 它支持圆角。若不需要圆角，可以用更短的 border: 4px solid transparent; border-image: 你的渐变 1;。切换到本工具的“渐变边框”标签，两种代码都会直接生成好。
为什么 border-image 的渐变边框设了圆角没效果？
border-image 会接管边框区域的绘制，按规范它与 border-radius 互斥，圆角不会生效，这是 CSS 的既定行为而非浏览器 Bug。需要圆角边框时，请改用 background-clip 双层背景方案。
推荐相关工具
随时在 Google 或百度搜索「OUCloud CSS 渐变」，快速找回本工具