Play supports two different gradient types: linear and radial.

Linear gradients display a linear transition between two or more colors in a straight line

Radial gradients display a circular gradient transitioning from one color at the center to another at the circle’s edge

To create a Gradient style in macOS, click the plus icon in the Styles Panel. A new gradient will appear at the bottom of your Gradient styles list. To choose the gradient's color values, click the edit icon on the row, then edit the gradient in the pop up.

Closing the panel and pop-up will automatically save your gradient.

Edit a gradient’s value the same way you created the initial gradient value. To duplicate, delete, or rename your Gradient style, right click on its name.

You can add as many colors along the gradient as you would like. Click on the gradient bar to add a new color and drag it to the desired location along the gradient. Click on one of the colors to edit it.

You can choose between linear and radial gradients using the drop down. The colors will stay the same.

For linear gradients, you can choose the gradient's angle by typing a value into the text field with an angle icon. In both linear and radial gradients, you can choose the spread by typing a value into the text field with a double-arrow icon.

To create a Gradient style on iOS, tap the four circle icon, and select "Gradients" from the menu that appears. Tap New Gradient, and a modal will appear where you can select the gradient's type, color values, position of the color values, angle, spread, and name. Closing the modal will automatically save your color.

Edit your Gradient style by tapping on the gradient you'd like to edit, and adjusting the values the same way you initially created them.

To duplicate, delete, or rename your Gradient style, tap on the gradient name while in the editor.