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



An array of color stops. Each stop sets a color and percentage.

Provide at least 2 colorStop items.


Always linear_gradient for this object.


The angle of the gradient fill, in degrees. Use the angle to set the direction of the gradient. For example, a value of 180 defines a gradient that changes color from top to bottom. An angle of 90 defines a gradient that changes color from left to right.

If angle is omitted, an angle of 180 (top to bottom) is used.


Use the LinearGradientFill object to cause the background for a component to be a linear gradient between two (or more) colors. Specify the colors you want to use and a percentage for each color along with an angle for the gradient and the behavior of the background when the user scrolls.

This object can be used in ComponentStyle.


{ "components": [ { "role": "container", "style": "exampleStyle", "layout": { "ignoreDocumentMargin": true, "minimumHeight": 150 }, "components": [ { "role": "title", "text": "Season Preview: Nobody Saw This Coming", "anchor": { "targetAnchorPosition": "center" } } ] } ], "componentStyles": { "exampleStyle": { "fill": { "type": "linear_gradient", "angle": 180, "colorStops": [ { "color": "#00000000" }, { "color": "#FFFFFF" } ] } } }}


Inherits From

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 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.

object ColorStop

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