Using gradients

Gradient Tool Overview - Google Web Designer

A gradient is a multi-color fill where each color changes gradually into the next. Gradients can be applied to either the border or the fill of elements.

Not all browsers support border gradients.

 

Google Web Designer can create two types of gradients:

• Linear gradients change color along a straight line between two endpoints.
•  Radial gradients change color concentrically from a single centerpoint.

To create a gradient:

1. Select the Linear gradient or Radial gradient button at the top of the color mixer.
2. By default, gradients have 2 color markers along the gradient bar at the top. Select a color marker to change its color.
3. Drag a color marker along the bar to change the transition distance.
4. To add more color markers, click the gradient bar. To remove a color marker, drag it down to the color field.

Linear gradients

By default, a linear gradient extends from the left edge to the right edge of the element that it's applied to.

To change how the linear gradient is applied:

1. Select the Gradient tool from the toolbar on the left, or press A.
2. Select the element whose gradient you want to edit.
3. Select either Edit stroke or Edit fill from the tool options bar at the top.
4. Adjust the gradient by dragging the red control handles:

   • Drag the outer handles to change how the gradient is applied across the object. Gradients can't extend past the border of SVG shapes, as shown in the first example below.
     

   • Drag the inner handle to rotate the gradient around the black centerpoint. The gradient automatically resizes to stay proportional to the element. Optionally, press Shift while dragging to constrain the rotation to 45° increments.
     

To reset the gradient to its default appearance, double-click the Gradient tool button.

Radial gradients

By default, radial gradients are applied in an oval shape that's defined by the center and corners of the affected element.

To change how the radial gradient is applied:

1. Select the Gradient tool from the toolbar on the left, or press A.
2. Select the element whose gradient you want to edit.
3. Select either Edit stroke or Edit fill from the tool options bar at the top.
4. Adjust the gradient by dragging the red control handles:

   • Drag the outer handles to resize the gradient. Optionally, press Ctrl (Windows) or ⌘ (Mac) while dragging to resize the gradient's X and Y axes proportionally, or press Shift while dragging to constrain the gradient shape to a circle.
     

   • Drag the center handle to move the gradient centerpoint.
     

To reset the gradient to its default appearance, double-click the Gradient tool button.