Adding a gradient to a section, button or any element can be a great way to make it stand out. They can be used on their own or on top of an existing background color or background image.

There are two types of gradients: Linear gradients and Radial gradients. Both gradient types consist of stops, or points along the gradient from which colors fade from one to another.

Linear Gradients

The default gradient is a Linear gradient. It creates a gradient of color in one direction, directed by the angle.

Adding a gradient

You can add a Linear Gradient with these steps:

  1. Select an element
  2. Go to the Style Panel (Shortcut: S)
  3. Under the Background section click on the Gradient icon
 

Angle

You can adjust the direction of the gradient using the direction arrows, dragging the dial, or simply typing in the desired angle in the input field.

 

Stops & Color

You can edit the color of the gradient by double clicking on the gradient stops that appear below the gradient bar. Here you can also adjust the opacity of the color stop. f there is a background image layer underneath the gradient, it will become visible once the opacity is lowered.

 

You can add additional colors to the gradient by adding more stops. To add another stop, click underneath the gradient bar. You can adjust the stop positions by clicking and dragging them along the gradient preview. To delete a stop, simply click and drag it down and out until you see a red X.

 

Additional Settings

There are two additional buttons that allow for further control of a gradient: Reverse Stops and Toggle Repeating.

Reverse stops does exactly that—it reverses the position of the stops.

Toggle repeating will cause the position and angle of the existing gradient to repeat. This is controlled by the position of the first and last stops. Drag the first or last stop away from the edge of the gradient bar to create a more obvious repeating gradient.

 

Just like a linear gradient, you can add, edit, delete, reverse, and repeat gradient stops.

Radial Gradients

Radial gradients create a gradient in the shape of a circle.To add a radial gradient, just create a linear gradient but enable the Radial option in the gradient panel.

The color stop on the left will be the color you see in the center of the radial gradient. Moving the focal point, the grey button in the radial gradient editor, will set the position of the center of the radial gradient. How the gradient behaves with the element’s bounds  is controlled by the radius preset.

Presets

Farthest Corner: This is the default preset— the gradient will start from the center point and continue until it reaches the farthest corner.

Closest corner: The gradient will start from the center point to the closest corner it can find.

Farthest Side: The gradient will start from the center point and continue until it reaches the farthest side.

Closest Side: The gradient will start from the center point to the closes side it can find.