<stop>

Defines a color stop for a gradient.

This is a child element of <linearGradient> and <radialGradient>.

• DOM object: SVGStopElement
• SVG2 spec: https://www.w3.org/TR/SVG2/pservers.html#StopElement

A <stop> is a single control point along a gradient's color ramp. Each stop has three pieces of information: an offset in the range [0, 1] (where 0 is the start of the gradient and 1 is the end), a stop-color, and an optional stop-opacity. At render time, SVG smoothly interpolates color and opacity between adjacent stops, so a gradient with two stops produces a straight fade and a gradient with many stops can produce complex multi-color transitions. Stops only make sense as children of <linearGradient> or <radialGradient>.

<linearGradient id="MyGradient">
  <stop offset="0%" stop-color="blue" />
  <stop offset="50%" stop-color="white" />
  <stop offset="100%" stop-color="yellow" />
</linearGradient>

The diagram below shows a linear gradient filled rectangle with three stops. Each stop is annotated with its offset and stop-color, and a dashed guide line shows where along the gradient axis the stop is positioned.

Attribute	Default	Description
offset	0	Where the gradient stop is placed, in the range of [0, 1] (or 0% to 100%).
stop-color	black	Color of the gradient stop.
stop-opacity	1	Opacity of the gradient stop, in the range of [0, 1].