CSS 渐变生成器

创建可拖拽色标的线性、径向与圆锥渐变，支持混合模式并输出可直接使用的 CSS

渐变类型

角度135°

插值空间

混合模式

色标颜色

位置

色标颜色

位置

色标颜色

位置

颜色格式

background-image: linear-gradient(135deg in oklch, #0B1020FF 0%, #2563EBFF 42%, #22D3EEFF 100%), radial-gradient(circle farthest-corner at 22% 18% in oklch, #A855F7CC 0%, #A855F700 62%, #00000000 100%);
background-blend-mode: normal, screen;

配置 JSON导出或粘贴渐变配置

{
  "version": 1,
  "layers": [
    {
      "type": "linear",
      "angle": 135,
      "centerX": 50,
      "centerY": 50,
      "radialShape": "circle",
      "radialSize": "farthest-corner",
      "colorSpace": "oklch",
      "blendMode": "normal",
      "stops": [
        {
          "color": "#0B1020FF",
          "position": 0
        },
        {
          "color": "#2563EBFF",
          "position": 42
        },
        {
          "color": "#22D3EEFF",
          "position": 100
        }
      ]
    },
    {
      "type": "radial",
      "angle": 0,
      "centerX": 22,
      "centerY": 18,
      "radialShape": "circle",
      "radialSize": "farthest-corner",
      "colorSpace": "oklch",
      "blendMode": "screen",
      "stops": [
        {
          "color": "#A855F7CC",
          "position": 0
        },
        {
          "color": "#A855F700",
          "position": 62
        },
        {
          "color": "#00000000",
          "position": 100
        }
      ]
    }
  ]
}

什么是 CSS 渐变？

CSS 渐变是由浏览器根据颜色之间的平滑过渡生成的图像。由于在渲染时计算，它可以在任意尺寸下保持清晰，并且不需要图片文件

渐变有三种类型：线性（方向或角度）、径向（从中心发散的圆或椭圆）以及圆锥（围绕中心旋转的扇形）。每个渐变由多个色标构成；每个色标可以包含位置和透明度来控制颜色混合

多个渐变可以在 background-image 中用逗号分隔叠加，并通过 background-blend-mode 进行混合，形成更丰富的纹理。CSS 还支持不同的插值色彩空间，例如 oklch，以获得更平滑、符合感知的过渡

线性渐变适合表现光照和方向感
径向与圆锥渐变常用于聚光、光环和色轮效果
调整色标位置可以让过渡更清晰或更柔和

使用方法

选择预设，或编辑渐变图层、几何参数、混合模式和色标。预览与 CSS 会自动更新，完成后可复制 CSS，或导出配置和图片

CSS 渐变生成器

预设

图层

图层设置

色标

CSS 输出

什么是 CSS 渐变？

使用方法