CSS 渐变生成器

创建线性或径向渐变并复制 CSS。

免费 - 无需注册 - 在您的设备上运行

在浏览器中本地运行

  • 实时结果
  • 0次上传
  • 一键保存
  • 免费无需账户
实际使用

可以放心的地方

  • 0次上传
    • 您的输入保留在设备上
    • 不会发送任何内容进行处理
  • 实时输出
    • 结果在工作区中更新
    • 更改输入并即时比较
  • 一键保存
    • 复制结果
    • 无需账户或安装
规格

CSS 渐变生成器 规格一览

输入
渐变类型、角度以及两个或多个颜色停止点。
输出
实时渐变预览和可复制的 CSS。
方法
直接在浏览器中组装原生 CSS 渐变。
色标点与形状
每点可调位置，最少两点
价格
免费
处理位置
在您的设备上
使用方法

CSS 渐变生成器 怎么用

  1. 1

    选类型和角度

    先挑线性或径向，再设定你要的角度。

  2. 2

    安排色标

    每个色标各有颜色和位置，可以添加或删除。上面的渐变条会随改动重画。

  3. 3

    复制 CSS

    结果是一行写好的 background 语句，按“复制结果”就能粘到样式表里。

问题

常见问题

这个工具无需上传任何内容就能工作吗？

是的。该工具在浏览器标签页内处理您的输入。不会发送到处理服务器或存储在账户中。

我可以在复制前更改结果吗？

可以。调整任何可用控件，结果会更新。仅在输出符合需求时复制。

支持哪些浏览器？

当前版本的 Chrome、Edge、Firefox 和 Safari 支持此处使用的浏览器功能。非常旧的浏览器可能缺少所需的 API。

背景说明

怎样避免渐变中间发灰

色环上距离过远的两个颜色，交界处会经过灰色。在中间加一个色相居中的色标，就能保住中段的饱和度。

  • 角度自正上方顺时针计算：0deg 由下往上，90deg 由左往右，135deg 为对角线。
  • 径向渐变不看角度。想改变颜色交界的位置，请调整色标的百分比。

完整规格

CSS 渐变生成器 的完整规格
输入渐变类型、角度以及两个或多个颜色停止点。
输出实时渐变预览和可复制的 CSS。
方法直接在浏览器中组装原生 CSS 渐变。
色标点与形状每个色标点都有 0–100％ 位置滑杆，可逐个删到剩两个为止。选径向之后，角度栏会自动收起。
价格免费。由工作区外明确标注的广告支持。
处理位置在您的浏览器标签页中。您的输入永远不会上传。
下一步

用同一批文件继续做

全部色彩工具： SPOTTOOLS 的色彩工具