Set colors and gradients

In the properties panel of the template editor, you give an element a color or a gradient: its fill, its outline or the background of a text. All color properties work the same way: each time, you choose between a solid color and a gradient.

This takes four steps:

1. Turn the color on in the properties panel.
2. Choose a solid color.
3. Create a gradient.
4. Adjust the blends in the gradient.

Turn the color on

1. Click the element on the canvas or in the layers panel. The properties panel on the left shows its properties.
2. Click the checkbox in front of the color you want to set.
   • For a shape, a text, a group or a mask:
     • Fill Color in the Appearance section: the fill.
     • Stroke Color in the Appearance section: the outline.
   • For the background of a text:
     • Background Color and Background Stroke Color in the Appearance section.
   • For an image:
     • Stroke Color in the Appearance section: the outline.
     • Color Masking in the Filters & Effects section: colors the image. Images have no Fill Color.
   
   The color fields appear below the checkbox. A new outline is black.
   You can't find Fill Color?

   For groups and masks, the Appearance section starts collapsed, and Filters & Effects does for every element. Click the section title to expand it.

   
   

Choose a solid color

A color you just turned on is a solid color. Color Type shows Solid.

1. Choose the color:
   • In the color picker:
     • Click the swatch next to Color and then your color in the color picker. With the transparency slider, you make it fully or partly see-through.
   • With a color value:
     • Type the color value into the field next to the swatch, for example #1E90FF.
   • From your screen:
     • Click the eyedropper (Pick color) on the right of the field, then the spot with the color.
   
   The color is now set.
   Nothing happens with the eyedropper?

   Not every browser supports the eyedropper; Chrome and Edge do, for example. Type the color value into the field instead.

   
   
2. Look at the canvas and check that the color fits.

Create a gradient

1. Choose Gradient under Color Type. A linear gradient from red to blue with two colors appears.
2. Choose the shape of the gradient under Gradient Type:
   • Linear: the colors run along a straight line.
   • Radial: the colors spread out from a center point.
   • Conic: the colors sweep around a center point.
3. Type the direction and the center. Each shape has its own fields for this:
   • For Linear and Conic:
     • Angle: the direction of the gradient, from 0 to 360°.
   • For Radial and Conic:
     • Position: the center point, with X and Y. 0 is the middle of the element, -100 and 100 are its edges.
   
   
4. Click a marker above the bar under Stops. Each marker is one color in the gradient, called a stop. A color picker opens, and you choose the stop's color. Stop colors can be transparent, so a gradient can fade out, for example.
5. Drag a marker along the bar to move its color to another spot. For an exact value, use the % field in its row of the list below.
6. For another color, click the plus below the list (Add color stop). The new stop is white and sits at the right end. The other stops move closer together.
7. To remove a color, click the minus in its row (Remove color stop). Two stops always remain; then the button is grayed out.
8. Look at the canvas and check that the gradient fits.

Adjust the blends

Between two neighboring stops, the bar shows a small diamond, the midpoint. That's where the two colors mix half and half.

1. Drag the diamond toward one of the two stops. The color of the other stop now takes up more of the blend. A moved diamond turns blue.
2. To make the blend even again, double-click the diamond.

You can drag the diamond between 5% and 95% of the space between the stops. If two stops sit very close together, there is no room for it, and it is hidden.