Using gradients

Gradient Tool Overview - Google Web Designer

A gradient is a multi-colour fill where each colour 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 colour along a straight line between two endpoints.
•  Radial gradients change colour concentrically from a single centrepoint.

To create a gradient:

1. Select the Linear gradient or Radial gradient button at the top of the colour mixer.
2. By default, gradients have 2 colour markers along the gradient bar at the top. Select a colour marker to change its colour.
3. Drag a colour marker along the bar to change the transition distance.
4. To add more colour markers, click the gradient bar. To remove a colour marker, drag it down to the colour 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 centrepoint. 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 centre 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 centre handle to move the gradient centrepoint.
     

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