Appeggio Help
Search…
Background gradient
This page explains what a background gradient (Bg gradient) is, and takes you through applying a background gradient within specific parts of your app.
A background gradient allows you to display smooth transitions between two or more specified colours. It is a linear gradient that can go up, down, left, right or diagonally.
To create a linear gradient you need to define at least two color stops. 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 yellow, transitioning to red:

Applying a background gradient

Select the part you wish to add a gradient to. In the example above, we have selected the card and then opened the card dropdown menu on the halo. Go to “General” and then you’ll see “Bg gradient”.
Select “Bg gradient” by clicking on the dropdown.
To apply a color scheme, you need to select the color for your first data stop, then your second data stop. To do this, hold the black dot for the first data stop, and slide it towards your preferred color. Do the same for your second data stop, and keep amending until you have the color combination you’re happy with. If you know the RGB code or the HEX code for your colors, then key them in.
You can set the direction of your gradient by sliding the black dot across the direction. You’ll see the direction change as it slides.
If you select ‘+’ to the right of the color selector you can add an additional color to the gradient, that is, you can have more than two colors.
Examples of changing the direction of the gradient once the colors have been set, using two colors, are shown below. You’ll see how changing the direction using the direction slidebar changes the direction of the gradient.
Left to right:
Diagonal:
Top to bottom:

Related information

#gradient #background #background gradient #bg gradient #color stops #linear gradient #gradient angle