The CSS gradient editor is a visual tool for designing linear, radial, and conic gradients with multi-layer stacking, 15 color space interpolation options, and one-click CSS code export. It goes beyond basic gradient generators by supporting modern color spaces like OKLCH and Display P3, which produce perceptually smoother transitions between colors.
Three gradient types and their use cases
- Linear (
linear-gradient) — colors transition along a straight line at a controllable angle (0°–360°). Most common for page section backgrounds and button fills - Radial (
radial-gradient) — colors radiate outward from a center point; adjustable center position, shape (circle or ellipse), and size (closest/farthest side or corner). Good for spotlight effects and button highlights - Conic (
conic-gradient) — colors rotate around a center point from a starting angle. Natural fit for pie charts, progress rings, and color wheel selectors
How multi-layer stacking works
Layers are rendered top to bottom in the layer list. Upper layers render first; transparency (opacity) on each layer controls how much the layer below shows through. Each layer has its own gradient type, color stops, and position — they're fully independent.
Adding more layers increases the length of the generated CSS. For mobile, keep it to 1–2 layers to avoid heavy render work on low-power devices.
Color stop operations: click the gradient bar to add a stop, drag to reposition it, select a stop to edit its color value (supports hex, rgb(), lch(), oklch(), and others) and opacity. CSS gradients require at least 2 color stops — the editor prevents deleting below that minimum.
Choosing a color space
Recommended starting points
- sRGB — widest browser support, best for production; all browsers handle it
- OKLCH — perceptually uniform; red-to-blue transitions don't produce a muddy grey midpoint
- HSL / HWB — polar spaces; hue transitions feel more natural, avoids the "mid-grey" problem of sRGB
Wide-gamut options
- Display P3 — ~25% wider gamut than sRGB; visible difference only on P3-capable displays (modern iPhone, Mac)
- Rec. 2020 — ultra-wide gamut, negligible difference from sRGB on ordinary displays
- ProPhoto RGB — printing workflows only
Polar color spaces (HSL, HWB, LCH, OKLCH) also expose a hue interpolation direction option: shorter path (default), longer path, increasing, or decreasing. This controls which way the hue rotates around the color wheel, preventing unexpected color jumps mid-gradient.
Browser compatibility note
The color-interpolation-method syntax (for specifying color space and hue interpolation) is a CSS Color Level 4 feature. Full support requires Chrome 111+, Safari 16.2+, or Firefox 113+. If your target audience includes older browsers, use sRGB as a baseline and test how the gradient degrades. The tool shows a warning if your current browser doesn't support the color format in use.