可视化 CSS 渐变生成器:线性 / 径向 / 圆锥 / 多色断点,实时预览,一键复制 CSS,导出 PNG。
- 本地处理
- 分类 颜色设计
- 适合 把视觉想法转成可复用的颜色值。
background: linear-gradient(135deg, #8b5cf6 0%, #06e6d7 50%, #ff4dd2 100%);
这个工具能做什么
一个所见即所得的 CSS 渐变可视化生成器,支持线性(linear)、径向(radial)、 圆锥(conic)三种主流类型,色标(color stop)数量不设上限。线性渐变通过 角度滑块在 0° 到 360° 之间任意旋转;径向渐变可选圆形或椭圆,锚点支持 正中心 / 左上 / 右上 / 左下 / 右下五个常用位置;圆锥渐变可指定旋转角度 与中心锚点。每个色标都有独立的颜色拾取器和 0–100% 位置数值,新增色标 一键插入,多余的色标一键移除。预览面板使用满屏渲染,可直接判断渐变 在 Hero 区、卡片背景、按钮底色下的真实效果。输出区给出可直接粘贴到 CSS / Tailwind / React inline style 的 `background:` 值,一键复制,也 可以导出 1280×720 的 PNG 截图给 Figma / Notion / 演示稿用。整个过程在 浏览器本地完成,不上传、不追踪、不需要注册。常见用途:落地页 Hero 背景、玻璃态卡片、强调按钮、播客封面、AI 应用环境光氛围。
工具细节
- 输入
- 文件 + 文本 + 数值
- 页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
- 输出
- 即时结果 + 复制 + 下载
- 结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
- 隐私
- 浏览器本地处理
- 主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
- 保存 / 分享
- 免账号使用
- 打开页面即可使用；刷新后是否保留结果取决于具体工具。
- 性能预算
- 首屏 JS ≤ 8 KB
- 没有声明 WASM 依赖，适合快速打开和移动端使用。
- 适用场景
- 颜色设计 · 设计师
- 分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。
怎么用
-
1. 输入
把内容粘贴或拖入工具面板。
-
2. 处理
点击按钮,在浏览器内本地处理,文件不上传。
-
3. 复制 / 下载
一键复制结果或下载到本地。
CSS 渐变生成器 适合怎么用
适合在真实界面工作中选色、查色、转色值或整理配色。
适合颜色任务
- 把视觉想法转成可复用的颜色值。
- 界面上线前检查对比度和可访问性。
- 让品牌、设计和前端实现的颜色决策对齐。
颜色检查项
- 对比度要按真实背景检查,不要只看色块。
- 有深浅主题时,两套都要单独看。
- 复制设计系统或代码库真正需要的格式。
下一步可以接着做
这些入口会把当前任务接到更完整的工具链里。
真实使用场景
给 SaaS 落地页做一个不像模板的 Hero 背景
Hero 区铺纯色太平,你想要点设计感。选 135° 的 3 色线性渐变,比如 indigo-600 到 violet-500 再到 fuchsia-400,满屏预览确认效果,把 输出的 `background:` 值复制进 Hero 的 CSS。整个流程不到两分钟,而且 是原生 CSS,不增加任何字节,从 360px 手机到 5K 屏都保持锐利。
给玻璃态卡片在毛玻璃后面垫一层柔和的径向辉光
backdrop-blur 的毛玻璃卡片如果底下没有颜色就会发死。切到径向,锚点 放左上,让一个亮 cyan-300 向外褪到透明,把它垫在模糊卡片容器后面。 你就得到了 iOS 那种环境光,让玻璃面板看起来是立体的。锚点有五个 位置可选,挪到高光正好打在你想要的那个角为止。
不打开 Figma 也能产出一张符合品牌的 OG 分享图
博客文章要一张 1280×720 的社交分享图,你又懒得开设计工具。做一个 4 色日落渐变,orange-400 经 rose-500 到 purple-700,点导出就拿到 尺寸正好的 1280×720 PNG。直接放进 meta 标签,或者在任意编辑器里 叠上标题文字。五分钟搞定,比平时折腾 Figma 的半小时省太多。
用圆锥渐变给 AI 应用做会旋转的环境光氛围
AI 对话界面很爱在输入框后面放一圈缓慢旋转的光晕。用绕中心扫一圈的 4 色圆锥渐变,复制 `background:` 值,再用 CSS keyframe 把角度 动起来,就有了那种呼吸式极光感。每个色标位置都能实时预览,确保 色环读起来是平滑光晕,而不是一块块尖锐的饼图扇形。
常见踩坑
用黑到白的 2 色渐变还纳闷为什么色带这么重,挑明暗更接近的色,比如 slate-300 到 slate-700,或者加一个中点色标。
在正文背后堆 6 个以上色标,变成油膜效果毁掉可读性,文字背景最多 3 色且相邻色标色相差不超过 30°。
把导出的 PNG 当网页整屏 Hero 用,在 4K 上边缘发虚,背景用原生 CSS,PNG 留给 OG 图这类静态素材。
隐私说明
所有操作都在你的浏览器本地完成。你选的颜色、色标、角度、渐变类型都不会 上传,没有任何服务器看得到你的设计。PNG 导出在本地 canvas 上生成,直接 下载到你的设备。渐变参数会编码进页面 URL,方便你分享一个能还原同一个 渐变的链接,也就是说拿到这个 URL 的人能看到这些颜色值。这是为分享特意 做的,里面只有公开的颜色代码,不含任何个人信息。
常见问题
类似工具组合
做你这行的人, 还会一起用这些。