Skip to main content
BVDART Logo

Gradients

A gradient assigns colors by position. Its stops specify colors at particular locations, while geometry determines how canvas coordinates become positions along the gradient.

Trace spatial coordinates into a gradient position and color.

(x, y)(0.70, 0.30)↓Project on direction↓t = 0.573↓#d78650
Spatial geometry
Interpolation space
0 · #24485b50 · #d37448100 · #e9e2b8

The field converts location to t; the ramp converts t to color. Click or use arrow keys to inspect that chain. Choose Conic to study the join: different endpoints create a seam. Closing the loop matches their colors while the coordinate still wraps from 1 to 0. Matching colors does not also guarantee a matching rate of change at the join.

The linear field turns around a fixed probe; then a conic field shows what happens when its endpoint colors meet. Use any control to take over.

What to try
  1. Click the gradient field or use its arrow keys to move the coordinate probe.
  2. Switch Spatial geometry; choose Conic and Close the loop to compare matching and different endpoint colors.
Open in the Lab ↗

What to look for: Geometry changes how (x, y) becomes t. The same t always samples the same ramp color. A conic field wraps from the ramp’s end to its beginning; matching endpoint colors removes the color jump.

How it works

A linear gradient projects coordinates onto a direction. A radial gradient uses distance from a center. A conic gradient uses angle around that center. The same set of stops can therefore produce bands, rings or a color wheel.

Between stops, the interpolation space controls the color path. Stop positions affect pacing: closely spaced stops create abrupt transitions, while wide intervals produce gradual change. Adding stops is useful when you need a specific intermediate color rather than an unrestricted blend.

Use it in the Lab

Generate a gradient on its own layer, then combine it with masks of content made through selection, blending or thresholded imagery. The Lab supports two to sixteen stops and stores them in recorded chains.

Limits & distinctions

The Lab currently has rectangular selections rather than saved layer masks. Use layer compositing and selected regions for these workflows, and inspect gamut clipping at saturated stops.

Sources & references

Guide updated