GradientStop

A color at a specific position along a gradient, to be used with the gradient() sampler when the colors should not be spaced evenly.

Because gradient() chooses a (uniformly) random position along it for each particle, the spacing of the stops determines how common a color is: the wider the gap between two stops, the more particles get a color that is sampled between those stops.

Stops can be listed in any order, and two stops at the same offset create a hard edge instead of a blend.

Example

// Mostly pinks, with a short blend into gold at the end.
gradient([
    { offset: 0, color: "#ff5a5f" },
    { offset: 0.8, color: "#ff8fa3" },
    { offset: 1, color: "#ffb400" },
]);

Properties

colorstring | Color

The color at this position. Accepts anything color() accepts.

offsetnumber

The position of the stop, from 0 (the start of the gradient) to 1 (the end). Values outside this range throw a PartyJSError.