Home > Designing and creating solutions > Editing objects, layout parts, and the layout background > Formatting objects, layout parts, and the layout background > Filling objects, layout parts, or the layout background with a color gradient

Filling objects, layout parts, or the layout background with a color gradient

A color gradient blends two or more colors in an object, layout part, or across the layout background.

To fill an object, a layout part, or the layout background with a color gradient:

1.	In Layout mode, select one or more objects, a part label, or click anywhere in the layout background to select it.

See Selecting objects.

Note  To select the layout background, ensure no objects or parts are selected.

2.	Click Inspector in the layout bar, then click Appearance.

3.	To change the appearance of the object or the body part when it’s in a particular state (for example, when a button is pressed), choose from the object state list (near the top of the Appearance tab).

See Specifying the display state for an object.

4.	In the Graphic area, for Fill, choose Gradient.

Note  To display the layout background, one or more layout parts must be transparent. See Setting the fill, line style, and borders for objects, layout parts, and the layout background.

You see the gradient control.

5.	Set color gradient options:

 

To	Do this
Specify colors to be blended	Click the color stops on the gradient control and choose a color from the color palette.
Add more colors to the color gradient	Click anywhere on the gradient control to add more color stops.
Change how sharply or subtly colors blend along the gradient	Drag the color stops along the gradient control.
Reduce the number of colors in the gradient	Drag color stops off the gradient control.
Blend the fill horizontally or vertically	Click to specify a linear gradient.
Blend the fill from the center outward	Click to specify a radial gradient. Note  The center point of a radial gradient on a layout part is controlled by the current theme. You can apply a radial setting by copying and pasting the setting from another object or layout part. See Copying formatting attributes between layout objects, parts, or backgrounds.
Change where a linear gradient blends	• For Angle, enter a value.  • OS X: Drag the angle control .
Change the start and end points of a linear color gradient or the center point and radius of a radial color gradient	On the layout, drag a blue handle of the gradient control on the image. Note  If you drag the gradient control off the layout, it disappears. To restore the gradient control:  • Choose Edit menu > Undo.  • Or, clear the gradient setting on the object in the Inspector, then redefine the gradient.
Reverse gradient colors left to right or center to outside	Click .

Notes

•	You can apply a radial setting by copying and pasting the setting from another object or layout part. See Copying formatting attributes between layout objects, parts, or backgrounds

•	Each theme comes with a set of default styles for objects such as shapes, buttons, lists, and menus. When you create an object or a new part on a layout, the object or part is formatted in the theme’s default style.

•	Drag the Opacity slider to change the transparency of the gradient color.

•	Layout background fill does not extend behind navigation parts.