---
title: LinearGradientFill
framework: applenewsformat
role: symbol
role_heading: Object
path: applenewsformat/lineargradientfill
---

# LinearGradientFill

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

## Declaration

```data
object LinearGradientFill
```

## Properties

colorStops: An array of color stops. Each stop sets a color and percentage. Provide at least 2 colorStop items. type: Always linear_gradient for this object. angle: 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

Applying a Background to a Component

## Discussion

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

## Relationships

### Inherits From

- [GradientFill](applenewsformat/gradientfill.md)

## See Also

### Backgrounds for Components

- [Applying a Background to a Component](applenews/applying-a-background-to-a-component.md)
- [ImageFill](applenewsformat/imagefill.md)
- [RepeatableImageFill](applenewsformat/repeatableimagefill.md)
- [VideoFill](applenewsformat/videofill.md)
- [GradientFill](applenewsformat/gradientfill.md)
- [Fill](applenewsformat/fill.md)
- [ColorStop](applenewsformat/colorstop.md)