Color gradients

How to apply color gradients.

What Is A Color Gradient?

A color gradient allows you to display smooth transitions between two or more specified colors. It is a gradient that can go up, down, left, right, diagonally, or anything in between from 0 to 360 degrees.

To create a color gradient, you need to define at least two color stops. A third color can be added if you like. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.

How to Create and Apply Color Gradients

The following example shows a linear gradient that starts at the top. It starts black, transitioning to white:

Example of a Color Gradient

What Parts Can Have a Color Gradient?

Almost every part that can have a background color can have a gradient applied. You can apply a color gradient to full pages, containers, rows, columns, cards, buttons, lists, menus, navbars - and the list goes on!

How to Apply A Color Gradient

Select the part you wish to add a gradient to. Selecting the part will activate the property editing panel on the right. Then go to the 'Colors' editor. You'll see two tabs in the editor - Foreground and Background. Gradients can be set on background colors.

In the Background tab, you’ll see three options - ‘Theme’, ‘Color’, and ‘Gradient’.

If you wanted to apply one of your theme colors to the background, you’d select ‘Theme’. If you wanted to choose a new color as the background, you would select ‘Color’. In this case, to apply a color gradient, you will choose ‘Gradient’.

Before we go any further, let's take a closer look at the color gradient editor, so you can see how it works.

A Closer Look at the Color Gradient Editor

The Color Gradient Editor

Creating a Gradient With Two Colors

Let's start by creating a gradient with two colors. The first color will be red, and the second will be yellow. The process is as follows:

1. Select the first color stop. Choose the color for the first color stop.

2. Select the second color stop. Choose the color for the second color stop.

A Color Gradient with Two Colors

Adjusting the Colors and Opacity

Now, let's tweak the colors and opacity. The process is as follows:

1. Select the first color stop. Go to the color slider, and you'll see that the dot is red (our first color). Slide until you have your desired color. You could also enter a HEX code, RGB, or HSL code here if you have a specific color in mind. You can also select a color by clicking on the color mixer above the slider for your color.

2. To adjust the opacity of your first color, go to the second slider (underneath), and move from left to right until you have reached your desired opacity.

3. Select the color stop, and repeat the process for your second color.

Adjusting Color and Opacity of Colors in a Gradient

Adding A Third Color to the Gradient

Now we'll add a third color to the mix. The process is as follows:

1. Select the "+" next to your second color step. This will create a third color stop.

2. Slide your second color to the desired spot to make room for your third color.

3. Select your third color stop. Select the color, and then adjust the opacity as needed.

Adding a Third Color to a Color Gradient

Adjusting the Direction of the Gradient

Now we'll adjust the direction of the gradient. To do this, slide the direction slider to your desired gradient direction. Here is an example:

Adjusting the Direction of the Color Gradient

Adjusting the Spacing of the Colors in the Gradient

You can also adjust how much 'space' your colors take up in the gradient, by using the color stop slider. Here is an example:

Adjusting the Spacing of the Colors in the Gradient