# GradientEditor

> Build linear and radial gradients in React, edit color stops with a keyboard, and interpolate colors in sRGB, OKLab, or OKLCH.

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

`GradientEditor` builds linear and radial CSS gradients. It comes from a
separate entry point, so a solid-color picker does not ship the gradient code.

## Usage

```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`   | purple-to-cyan linear gradient |
| `onChange`         | `(value) => void` | —                              |
| `onChangeComplete` | `(value) => void` | —                              |
| `minStops`         | `number`          | `2`                            |
| `maxStops`         | `number`          | `12`                           |
| `disabled`         | `boolean`         | `false`                        |

Each stop has a stable `id`, a CSS `color`, and a position from 0 to 100. The
editor supports linear and radial gradients, keyboard-operable range inputs,
native color controls and direct CSS color input.

## Model utilities

The same entry exports `gradientToCss`, `sampleGradient`, `normalizeGradient`,
`addGradientStop` and `isGradientColorSupported`. `sampleGradient` defaults to
OKLab interpolation to avoid the muddy midpoints common in RGB gradients.