Object

LinearGradientFill

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

Properties

colorStops
(Required)

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

Provide at least 2 colorStop items.

type
string
(Required)

Always linear_gradient for this object.

angle
number

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.

Discussion

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.

Example

{ "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" } ] } } }}

Relationships

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.