# GradientEditor

> 在 React 中构建线性和径向渐变，用键盘编辑色标，并在 sRGB、OKLab 或 OKLCH 色彩空间中进行颜色插值。

Source: https://chroma-panel.jscrate.dev/zh/react/components/gradient-editor
Last updated: 2026-09-21

`GradientEditor` 用来构建 CSS 线性渐变和径向渐变。它来自单独的入口，所以只用来选纯色的选择器不会带上渐变相关的代码。

## 用法

```tsx
import { useState } from "react";
import {
  GradientEditor,
  gradientToCss,
  type GradientValue,
} from "chroma-panel/gradient";

const initial: GradientValue = {
  type: "linear",
  angle: 90,
  stops: [
    { id: "start", color: "oklch(65% 0.22 285)", position: 0 },
    { id: "end", color: "#06b6d4", position: 100 },
  ],
};

export function GradientExample() {
  const [gradient, setGradient] = useState(initial);
  return (
    <GradientEditor
      value={gradient}
      onChange={setGradient}
      onChangeComplete={(value) => console.log(gradientToCss(value))}
    />
  );
}
```

## Props

| Prop               | Type              | Default                |
| ------------------ | ----------------- | ---------------------- |
| `value`            | `GradientValue`   | —                      |
| `defaultValue`     | `GradientValue`   | 从紫色到青色的线性渐变 |
| `onChange`         | `(value) => void` | —                      |
| `onChangeComplete` | `(value) => void` | —                      |
| `minStops`         | `number`          | `2`                    |
| `maxStops`         | `number`          | `12`                   |
| `disabled`         | `boolean`         | `false`                |

每个色标都有一个稳定的 `id`、一个 CSS `color`，以及 0 到 100 之间的位置。编辑器支持线性和径向渐变、可用键盘操作的 range 输入框、原生颜色控件，也可以直接输入 CSS 颜色。

## 模型工具函数

同一个入口还导出了 `gradientToCss`、`sampleGradient`、`normalizeGradient`、`addGradientStop` 和 `isGradientColorSupported`。`sampleGradient` 默认使用 OKLab 插值，避免 RGB 渐变中常见的中间色发灰、发浑的问题。