Search
Clear search
Close search
Google apps
Main menu

Using gradients

A gradient is a multi-color fill where each color changes gradually into the next. Gradients can be applied to both the border and the fill of HTML, canvas, and SVG elements. (Be aware, however, that not all browsers currently 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.

You can adjust the gradients by changing how many colors they have, how close each color is to the next, how the gradient is applied to the object, the angle of the linear gradient, and the centerpoint of the radial gradient.

To apply or modify a gradient, click either the linear gradient  or the radial gradient  button from the top of the color mixer and then:

  • Click a color marker to change its color.
  • Drag a color marker to change the transition distance.
  • Click in the gradient bar to add a new color marker.
  • Drag a color marker down from the gradient bar to the color field to remove it.

Using linear gradients

Once a linear gradient has been applied to an object, the gradient can be adjusted using the handles that appear when the object is selected with the gradient tool. There are three red control handles on the linear gradient control, two for resizing the gradient, and one to rotate it.

By default, the gradient extends from the left edge to the right edge of the element that it's applied to. The outer handles control the edge of the gradient effect.  When applied to an HTML element, the gradient can be extended beyond the boundary of the element, exposing only a part of the gradient change. Note that a gradient can not be extended past the border of a canvas element.

The gradient can also be reduced so that its boundary is inside the element, which extends the color stop at either end. 

 

The other control handle, halfway between the center and end of the gradient, lets you rotate the gradient around the centerpoint. As you rotate the gradient, it expands and contracts to maintain the size of the gradient relative to the edges of the element. 

 

To change how the linear gradient is applied:

  1. Select the Gradient tool  from the toolbar.
  2. Click the element that has a gradient you want to edit.
  3. Choose either Edit stroke  or Edit fill  from the tool options panel, depending on which gradient you want to edit.
  4. Drag the outer handles to change how the gradient is applied across the object.
  5. Drag the inner handle to rotate the gradient. Optionally, shift-drag to constraint the rotation to 45° increments.

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

Using radial gradients

Once a radial gradient has been applied to an object, the gradient can be adjusted using the resize handles that appear when the object is selected with the gradient tool. By default, the radial gradient is applied as an oval shape defined by the center and corners of the element that it's applied to.  

There are three red control handles on the radial gradient control, two for resizing the gradient, and one to change the centerpoint.

The two outer handles let you adjust the X and Y axes of the radial gradient separately.  The gradient can be extended beyond the boundary of the element, exposing only a part of the gradient, or reduced so that its boundary is inside the element, which extends the last color stop. To scale both X and Y axes together, Ctrl-drag either of the outer handles.

The center handle lets you move the centerpoint of the gradient. Double-clicking on the center handle returns the centerpoint of the gradient to the centerpoint of the element.

To change how the radial gradient is applied:

  1. Select the Gradient tool  from the toolbar.
  2. Click the element that has a gradient you want to edit.
  3. Choose either Edit stroke  or Edit fill  from the tool options bar, depending on which gradient you want to edit.
  4. Drag the outer handles to change how the gradient is applied across the object. Optionally, shift-drag to constraint the gradient to a circle.
  5. Drag the center handle to change the centerpoint. 

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

Was this article helpful?
How can we improve it?