CSS 渐变生成器

通过可视化编辑器即时生成 CSS 渐变代码。

加色彩锚点
渐变画幅方向
CSS:
Advertisement

通过高度可视化的滑块面板设计漂亮的 CSS 颜色渐变,并能一键复制代码。完全在客户端处理。

使用方法

  1. 选择渐变方向,或切换到径向渐变。
  2. 设置颜色,需要时再添加色标。
  3. 把生成的 CSS 直接复制到样式表里。

常见问题

生成的是什么 CSS

标准的 linear-gradient() 和 radial-gradient() 取值,所有当代浏览器都支持,无需加前缀。

最多能用多少种颜色

多少都行,但通常两三种最好看。色标一多,交界处容易发浑。

渐变中间为什么发灰

因为两个相对的色相要经过一个去饱和的点才能相接。挑色轮上更接近的颜色,或加一个中间色标来引导过渡。

推荐工具