Neatbo.

渐变生成器

调出喜欢的渐变,直接复制 CSS。

浏览器本地处理输入渐变色标输出CSS
  1. 1添加输入
  2. 2调整设置
  3. 3获取结果

工具输入和文件在当前浏览器处理,不会上传。

输入内容

切换工具时在当前标签页临时保留输入。刷新或关闭后清除,较大的结果可能需要重新生成。

⌘ / Ctrl + Enter 运行

渐变色标

0 个字符 · 0 字节
处理选项

先填写标记为必填的选项,其余可保留默认值。

正在准备处理工具…

开始之前

按校验后的颜色及位置生成线性或径向渐变。色标按位置排序,预览与复制的 CSS 使用同一个生成值。

如何使用

  1. 调整已有色标的颜色和位置,至少保留两个;需要时可继续添加,也可在 JSON 编辑框精确调整。
  2. 选择线性或径向渐变。线性渐变还可设置角度,然后点击“生成渐变 CSS”。
  3. 核对预览,再复制或下载 CSS。

支持范围与限制

粘贴文本最多 1 MiB;处理后请核对结果。

操作示例

示例输入

[{"color":"#000","position":100},{"color":"#fff","position":0}]
示例参数
{}

示例输出

background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 1) 100%);

出现问题时

请使用已说明的输入格式,并遵守界面限制。用于其他文档或应用前请复核结果。修改输入会将旧结果标为已过期;运行失败会清除旧结果。

常见问题

我的文件会上传吗?

不会。文件和工具输入在当前浏览器处理;站内切换可在同一标签页暂存工作状态。刷新或关闭标签页后无法恢复,请及时下载需要保留的结果。

需要检查结果的哪些方面?

按校验后的颜色及位置生成线性或径向渐变。色标按位置排序,预览与复制的 CSS 使用同一个生成值。

文档与延伸阅读

相关工具