CSS 渐变生成器

做出渐变，并复制它背后的 CSS。

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

在您的浏览器标签页中运行

  • 2种渐变
  • CSS可直接粘
  • 实时预览
  • 0次上传
规格

CSS 渐变生成器 规格一览

输入
类型、角度和两个以上色标
输出
预览与可复制的 CSS
类型
线性与径向
预览从哪来
浏览器画您的 CSS
价格
免费
需要账户
无
处理位置
在您的设备上
使用方法

CSS 渐变生成器 怎么用

  1. 1

    选类型

    选线性或径向。

  2. 2

    设定色标

    设定色标。

  3. 3

    复制 CSS

    复制 CSS。

问题

常见问题

可以加几个色标？

看这段渐变需要几个。两个就能做出最简单的渐变，每多一个，浏览器就多一个要经过的颜色点。

预览会和我的页面一样吗？

预览是浏览器拿您复制的同一段 CSS 画的，只要元素尺寸一样，粘到哪里就长什么样。

可以把渐变存成图片吗？

不行。这个面板给的是 CSS。需要文件而不是样式规则的话，得另外想办法生成。

渐变会被发送到哪里吗？

不会。它在这个浏览器标签页内拼成，不会上传，也不会存入任何账户。

背景说明

耐看的渐变

选线性或径向，设定角度，色标要几个就加几个。预览就是这段 CSS 本身，所以您看到的和您复制走的是同一个东西。

  • 两个明度接近的色标混得顺，差太多容易看到色带。
  • 文字压在渐变上，两端遇到的背景不一样，最深和最浅处都要看。
  • 线性渐变改动最大的是角度，先把角度定下来再细调颜色。
  • 把规则粘在元素的背景上，并记得给元素一个尺寸去填。

完整规格

CSS 渐变生成器 的完整规格
输入渐变类型、角度，以及两个以上的色标。
输出实时预览，以及画出它的那段 CSS，可直接复制。
类型线性与径向，都是用原生 CSS 渐变拼出来的。
预览从哪来浏览器拿您要复制的同一段 CSS 画出来的。
价格免费。由工作区外明确标注的广告支持。
需要账户不需要。
处理位置在您的浏览器标签页中。您的输入永远不会上传。
下一步

用同一批文件继续做

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