渐变 CSS 在你的浏览器本地生成,不会上传。

CSS 渐变生成器

构建线性或径向 CSS 渐变,调整色标和位置,实时预览,并复制现成的 background 声明。

渐变 CSS 在你的浏览器本地生成,不会上传。

生成 CSS 渐变

渐变类型

色标

渐变预览

面向界面与原型的快速 CSS 渐变

无论是按钮、卡片、Hero 背景、社交图、原型还是 UI 实验,需要一个干净的渐变又不想手写语法时,都可以用这个 CSS 渐变生成器。

所有渐变状态都留在你的浏览器里。在本地添加、删除和微调色标,然后把 CSS background 声明复制到你的样式表中。

如何使用这个工具

  1. 选择渐变类型

    选择线性或径向。线性渐变可调整角度滑块。

  2. 编辑色标

    选择颜色、设置 0 到 100% 的位置,并按需添加或删除色标。

  3. 复制 CSS

    预览渐变,把 background 声明复制到你的 CSS 中。

常见问题

这个 CSS 渐变生成器会上传内容吗?

不会。渐变在你的浏览器本地生成。

可以创建径向渐变吗?

可以。把类型从「线性」切换到「径向」即可生成 radial-gradient 背景。

最多能添加多少个色标?

可以添加多个色标,并把每个位置设置为 0 到 100%。

它输出什么 CSS?

输出是一段 background 声明,可粘贴到样式表或 style 属性中。