Contents

LinearGradientFill

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

Declaration

object LinearGradientFill

Properties

NameTypeDescription
colorStops Required[ColorStop]

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

Provide at least 2 colorStop items.

type Requiredstring

Always linear_gradient for this object.

anglenumber

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 you omit angle, Apple News uses an angle of 180 (top to bottom).

Mentioned in

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

You can use this object 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"
          }
        ]
      }
    }
  }
}

See Also

Backgrounds for Components