Color Gradient Generator - Documentation

Overview

The WPT Gradient Generator is a browser-based tool for creating smooth, perceptually accurate CSS gradients using the OKLCH color space. Unlike standard RGB or HSL gradients, OKLCH interpolates through colors in a way that maintains consistent perceived brightness and saturation across the transition — avoiding the muddy or washed-out midpoints that often appear in regular CSS gradients.

The tool outputs a ready-to-paste background-image: linear-gradient() CSS rule with baked-in intermediate color stops, ensuring the gradient renders correctly in all browsers including those that don't yet support native OKLCH gradient interpolation.

Interface Overview

The tool is split into two columns. The left column contains all the controls. The right column shows a live preview of your gradient that updates in real time as you make changes.

Color Stops

Color stops define the colors your gradient transitions between. You can have between 2 and 5 stops.

Adding and removing stops

• Click the + button to add a new color stop (up to 5).

• Click the small ✕ beneath a swatch to remove it (minimum 2 stops required).

Editing a color

Click any color swatch to open the color picker popover. It contains three controls:

• Hex input — type any valid hex color value (e.g. #FF0000) and press Enter to apply it directly.

• Saturation/brightness canvas — click or drag anywhere inside the square to pick the exact shade. The horizontal axis controls saturation (left = desaturated, right = fully saturated) and the vertical axis controls brightness (top = bright, bottom = dark).

• Hue slider — drag the circular thumb along the rainbow bar to change the hue. The thumb color updates to show the currently selected hue.

Click anywhere outside the popover to close it.

Opacity (first and last stop only)

The first and last color stops have a small opacity input beneath their swatch. Type a value between 0 and 100 to set how transparent that stop is.

• 100 = fully opaque (default)

• 0 = fully transparent

This is particularly useful for border gradients that fade in and out at the edges, or for overlaying a gradient on top of an image. The opacity is output as the / alpha syntax in OKLCH — for example oklch(65% 0.2 30 / 0.5) for 50% opacity.

Type the first digit, then continue typing the second — the field stays focused until you click away or press Enter.

Smoothness

The Smoothness slider controls how many intermediate color stops get baked into the CSS output. Range is 1 to 20.

• Low values (1–4) produce fewer stops and simpler CSS, but the gradient may show banding or uneven transitions, especially across large hue shifts.

• High values (12–20) produce more stops and smoother transitions, at the cost of more verbose CSS output.

A value of 8 is a good default for most gradients. Increase it if you notice the gradient looking stepped or uneven in the preview.

Note: the live preview always renders smoothly regardless of this setting. The Smoothness value only affects the CSS output.

Angle

The Angle control sets the direction of the gradient.

Dial

Click and drag the handle on the circular dial to rotate the gradient direction. The line points in the direction the gradient flows.

Number input

Type a value directly into the angle input field (next to the dial label) for precise control. Accepts values from 0 to 360. Press Enter or click away to confirm. Values outside the range wrap around automatically.

Common values:

• 0° = top to bottom

• 90° = left to right

• 135° = diagonal top-left to bottom-right

• 180° = bottom to top

Easing Curve

The Easing Curve controls how the color transition is distributed across the gradient — whether it moves at a constant pace or accelerates and decelerates.

Curve canvas

The canvas shows a cubic bezier curve. The two cyan handles can be dragged to reshape the curve:

• A straight diagonal line = linear, even transition (default)

• A curve that rises steeply then flattens = the transition happens quickly at first, then slows

• A curve that starts flat then rises steeply = slow start, fast finish

The dashed guide lines show the control arms connecting each handle to the fixed start and end points.

Preset buttons

Four preset curves are available as shortcuts:

Clicking a preset snaps the handles to that curve. Dragging a handle manually will deactivate the active preset.

CSS Output

The CSS output box at the bottom of the left column shows the ready-to-use CSS rule. It updates live as you adjust any control.

The output uses oklch() color values with baked-in intermediate stops (the number of stops is determined by the Smoothness setting), and wraps everything in a .gradient rule:

.gradient {
  background-image: linear-gradient(
    90deg,
    oklch(88.3% 0.181 94) 0%,
    oklch(71.0% 0.186 47) 50%,
    oklch(42.1% 0.193 332) 100%
  );
}

Replace .gradient with your own selector before pasting into your stylesheet.

Copy button

Click copy in the bottom-right corner of the output box to copy the full CSS rule to your clipboard. The button briefly shows copied! to confirm.

Browser Support

The tool uses the oklch() color function in its CSS output. Browser support:

For older browser support, consider adding a standard rgb() fallback background-image rule above the oklch one in your stylesheet.