Gradient

CSS 渐变生成器

创建线性、径向、圆锥渐变,支持无限停止点、OKLCH 感知插值、Tailwind v4 utility 输出。实时预览、30+ 预设,在浏览器中运行。

Linear(线性)沿一条直线以指定角度渐变(0° 朝上、90° 朝右)。Radial(径向)从中心点向外渐变 — 圆形或椭圆,搭配 farthest-corner 等大小关键字。Conic(圆锥)围绕中心点旋转 — 色彩停止点像时钟指针的角度。圆锥渐变非常适合饼图、仪表盘以及合成 color-wheel 背景。

在不相邻的色相之间过渡时 — 例如蓝 → 黄、红 → 绿。默认的 sRGB 插值会经过浑浊的灰色中点;OKLCH(CSS Color Module 4 in oklch)会保持中点鲜艳,因为它在感知均匀的色彩空间中插值。两个相近色相的两段渐变差异很小;多停止点或宽色相范围渐变,OKLCH 效果差异非常显著。

色彩停止点
CSS
Tailwind v4
JSON
预设组

为生产环境的 CSS 渐变而生

线性 / 径向 / 圆锥、OKLCH 平滑、Tailwind 友好 — 加上几个让你真正用得开心的小细节。

三种渐变类型

Linear 角度 0-360°、Radial 圆形/椭圆 + 大小 + 位置、Conic 起始角度 + 位置。输出符合 CSS Images Module Level 4 规范。

最多 12 个色彩停止点

在任意百分比添加停止点,拖动滑块微调位置,点击色块选色或粘贴 HEX。输出时自动排序。点 × 移除(最少 2 个停止点)。

OKLCH 感知插值

在默认 sRGB 与现代 in oklch 插值之间切换。OKLCH 给你感知上更平滑的中间色 — 跨色相不再出现浑浊灰带。尚未实现 CSS Color 4 的浏览器会优雅 fallback。

CSS、Tailwind v4、JSON 三种输出

三个输出面板实时更新:纯 CSS(background-image: linear-gradient(...))、Tailwind v4 任意值 utility(bg-[linear-gradient(...)])、可直接丢进 Style Dictionary 或 Figma Tokens 的 JSON 设计 token。

30+ 精选预设

Sunset、Ocean、Aurora、Cyber、Royal、Neon Pink、Iris、Bullseye、Conic Wheel — 点一下加载并微调。每个预设都是真正的生产级起点,而不仅仅是一个名字。

实时预览 + 隐私优先设计

预览用原生 background-image 渲染,所见即所得 — 你的样式表将输出完全相同的结果。每个像素都在本地运行 — 打开 DevTools → Network 即可验证没有任何对外请求。

如何创建 CSS 渐变

从空白到可上线的 CSS、Tailwind 或 JSON,四个步骤。

  1. 1

    选择渐变类型

    Linear 适合背景、页头、hero 区块。Radial 适合聚光、暗角、发光按钮。Conic 适合饼图、色相环、合成背景。用 tabs 切换 — 切换时你的色彩停止点会保留。

  2. 2

    放置色彩停止点

    点击色块打开取色器,或直接在字段中粘贴 HEX。拖动滑块设置停止点位置 0-100%。点击 + Add stop 在最大空隙处插入新停止点(中点色)。最多 12 个停止点。

  3. 3

    微调几何与插值

    Linear 设置角度(0° 朝上、90° 朝右)。Radial 选择形状、大小关键字、中心位置。Conic 设置起始角度。把 Color interpolation 切换为 OKLCH,获得跨色相的感知平滑中点。

  4. 4

    复制输出

    三个面板实时更新:CSS(background-image:...)、Tailwind v4(bg-[...])、JSON(设计 token 结构)。各面板用复制图标,或点 Download CSS 把 gradient.css 保存下来,直接放进项目。

为设计师 + 开发者打造

四种常见场景 — 在这些情况下,浏览器内隐私优先工具比打开 Figma + 另开渐变网站快得多。

营销页的 hero 背景

选一个接近品牌的预设,把两个品牌色丢进停止点,切换到 OKLCH 插值得到干净的中点。复制 CSS、粘贴到 hero 的样式表。总耗时:不到 2 分钟。

品牌感的按钮 + 卡片渐变

构建一个 3 段品牌渐变、复制为 JSON 设计 token、丢进 Style Dictionary / Figma Tokens。所有平台、所有按钮和卡片都引用同一个渐变。一处更新,处处生效。

图表 + 仪表板的圆锥背景

合成圆锥渐变非常适合饼图视觉、进度仪表盘、「数据加载中」shimmer 状态。选圆锥类型、设置起始角度、在正确百分比放停止点 — 0-360° 角度与百分比位置完全对应。

幻灯片、社交贴文、hero 图的定制背景

构建好渐变、设置成你目标的比例(16:9 幻灯片、1:1 IG、3:1 X header),预览截图。或把 CSS 粘贴到一份单文件 HTML、用浏览器在你需要的精确像素尺寸下截图。

100% 私密 — 在浏览器中运行

你的色彩与渐变永远不会离开你的设备。打开 DevTools → Network 即可验证任何操作中都没有对外请求。

  • 渐变字符串组装、CSS / Tailwind / JSON 序列化、实时预览全部以 JavaScript 在你的机器上运行 — 没有服务器渲染、没有第三方 API。
  • 预览使用原生 CSS background-image — 所以你看到的渐变,在用户浏览器中将完全相同。
  • 无需登录、不对色彩值埋点。仅使用一个 cookie 记录 cookie 同意状态,以及一个 cookie 记录语言偏好。

相关文章

为 CSS 渐变、OKLCH 插值、设计 token 系统精选的实用文章。

常见问题

线性、径向、圆锥有什么不同?

Linear(线性)沿一条直线以指定角度渐变(0° 朝上、90° 朝右)。Radial(径向)从中心点向外渐变 — 圆形或椭圆,搭配 farthest-corner 等大小关键字。Conic(圆锥)围绕中心点旋转 — 色彩停止点像时钟指针的角度。圆锥渐变非常适合饼图、仪表盘以及合成 color-wheel 背景。

什么时候要用 OKLCH 插值?

在不相邻的色相之间过渡时 — 例如蓝 → 黄、红 → 绿。默认的 sRGB 插值会经过浑浊的灰色中点;OKLCH(CSS Color Module 4 in oklch)会保持中点鲜艳,因为它在感知均匀的色彩空间中插值。两个相近色相的两段渐变差异很小;多停止点或宽色相范围渐变,OKLCH 效果差异非常显著。

Tailwind v4 输出能做什么?

一个任意值 utility,可以直接粘贴到 JSX / Blade / HTML:bg-[linear-gradient(45deg,#ff6b6b_0%,#feca57_50%,#ff9ff3_100%)]。无需修改 tailwind.config.js,任何 Tailwind 4 项目都可使用。如果偏好命名色彩 token,改为复制 CSS 自行转换。

旧浏览器能跑吗?

线性与径向渐变自 2014 年以来就普遍支持。圆锥渐变在 2021 年所有 evergreen 浏览器都已支持。in oklch 插值关键字需要 Chrome 111+、Safari 16.2+、Firefox 113+。需要支持更旧浏览器时,使用默认 sRGB 插值即可 — 视觉差异主要出现在跨色相多停止点渐变上。

数据会发送到服务器吗?

不会。渐变字符串组装、CSS / Tailwind / JSON 序列化、实时预览全部以 JavaScript 在你的设备上运行。打开 DevTools → Network 即可验证任何操作中都没有对外请求。粘贴品牌色、内部 token 都安全 — 没有任何字节离开你的电脑。