Contents

ColorStop

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

Declaration

object ColorStop

Properties

NameTypeDescription
color RequiredColor

The color of this color stop.

locationnumber

An optional location of the color stop within the gradient, as a percentage of the gradient size. If you omit location, Apple News calculates the length of the stop by first subtracting color stops with specified locations from the full length, then equally distributing the remaining length.

Discussion

Use this object for gradients in a LinearGradientFill style definition.

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