Color gradients
How to apply color gradients.
Last updated
Was this helpful?
How to apply color gradients.
Last updated
Was this helpful?
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.
The following example shows a linear gradient that starts at the top. It starts black, transitioning to white:
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!
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.
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:
Select the first color stop. Choose the color for the first color stop.
Select the second color stop. Choose the color for the second color stop.
Now, let's tweak the colors and opacity. The process is as follows:
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.
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.
Select the color stop, and repeat the process for your second color.
Now we'll add a third color to the mix. The process is as follows:
Select the "+" next to your second color step. This will create a third color stop.
Slide your second color to the desired spot to make room for your third color.
Select your third color stop. Select the color, and then adjust the opacity as needed.
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:
You can also adjust how much 'space' your colors take up in the gradient, by using the color stop slider. Here is an example:
