The object for specifying the color and location for a color stop in a gradient.



The color of this color stop.


An optional location of the color stop within the gradient, as a percentage of the gradient size. If location is omitted, the length of the stop is calculated by first subtracting color stops with specified locations from the full length, then equally distributing the remaining length.


Use this object for gradients in a LinearGradientFill style definition.

ColorStop Properties Example

{ "components": [ { "role": "container", "layout": { "ignoreDocumentMargin": true, "minimumHeight": "50vh" }, "style": { "fill": { "type": "linear_gradient", "angle": -10, "colorStops": [ { "color": "#FFFFFF", "location": 0 }, { "color": "#FFFFFF", "location": 20 }, { "color": "#AAAAAA", "location": 50 }, { "color": "#333333", "location": 90 }, { "color": "#000000", "location": 100 } ] } }, "components": [ { "role": "body", "textStyle": { "textColor": "#FFFFFF" }, "text": "Fade to black." } ] } ]}

See Also

Backgrounds for Components

Applying a Background to a Component

Change the appearance of the backgrounds in your article.

object ImageFill

The object for adding an image background fill to a component.

object RepeatableImageFill

The object for adding a background image that can be repeated.

object VideoFill

The object for adding a video background fill to a component.

object LinearGradientFill

The object for displaying a linear gradient as a component background.

object GradientFill

The properties shared by all gradient fill types.

object Fill

The object for setting a fill type and attachment for a component’s background fill.