正在准备工作区…
输入
正在准备工作区…
输出
结果将显示在这里。
使用方法
- 选择“线性”或“径向”，设置两种颜色。
- 调整停止点；线性渐变还可设置角度。
- 选择“复制 CSS”，将背景声明应用到元素。
控制 CSS 渐变
CSS 渐变通过颜色生成背景，无需单独的图片文件。它能随卡片、横幅或区块缩放，也便于在样式表中修改。
此工具专注双色渐变。可选择线性方向或居中的圆形径向渐变，再通过停止点控制颜色过渡的起止位置。
方向与颜色停止点
角度仅适用于线性渐变。径向模式使用元素中心的圆形渐变，没有角度设置。
停止点范围为 0% 到 100%。两点越近，过渡越窄；位置相同则形成清晰的颜色分界。
输入
#2563eb → #9333ea, 135 degrees结果
background: linear-gradient(135deg, #2563eb 0%, #9333ea 100%);使用所示颜色和角度的双停止点线性渐变。
预览的含义
预览直接使用生成的 CSS。其比例可能与目标元素不同，径向渐变尤其明显。
第一个停止点不能位于第二个之后。此编辑器仅生成一层双色渐变，更多停止点和图层需自行加入样式表。
应用声明
复制结果以 background: 开头。应用到目标选择器时，请检查可能被它覆盖的现有背景图、背景色或简写设置。
处理限制
文本输入最大 1 MiB。CSS 和 HTML 转换在工作线程中运行，限时 30 秒。颜色工具使用 sRGB；生成的样式仅供预览，需要在您的布局中测试。
延伸阅读MDN · CSS 渐变
?
常见问题
可以增加第三种颜色吗？
此工具支持两个停止点。如需更多颜色，可复制 CSS 后手动加入逗号分隔的停止点。
径向模式为什么没有角度？
居中的圆形径向渐变从中心向外扩展，角度设置只对线性渐变有意义。
可以生成没有过渡的颜色分界吗？
可以。将两个停止点设为相同位置，即可移除两种颜色之间的过渡。
会生成图片文件吗？
不会。“复制 CSS”提供背景声明，由浏览器在使用声明时绘制渐变。
为什么实际元素上的渐变看起来不同？
目标元素的尺寸和比例会影响渐变。请在实际元素上检查，不要仅依赖预览卡片。