Linear Gradient
The Linear Gradient component allows you to apply a linear gradient background to elements in your app's UI.
You can think of the Linear Gradient component as essentially a View which has configuration options for styling the background with a color gradient.
Adding a Linear Gradient
- Select the Linear Gradient component from the Components drawer. You can open the list of components by clicking the
+
button next to Components. - Then, add one or more child components whose content you want to display inside.
In the example below, we have used it to create custom buttons and a card element.

You can also use the Linear Gradient component as a background for your whole Screen.

Configuration Properties
Property | Description |
---|---|
Component Name | To alter the name of the component. The name is reflected in the Components tree. Defaults to 'Linear Gradient'. |
End Y | The ending point of Y as a number 0 - 100 |
End X | The ending point of X as a number 0 - 100 |
Start Y | The starting point of Y as a number 0 - 100 |
Start X | The starting point of X as a number 0 - 100 |
Color 3 | Optional. The 3rd color stop |
Color 2 | Required. The 2nd color stop |
Color 1 | Required. The 1st color stop |
Web Behavior
On web, the Start and End properties only change the angle of the gradient because CSS gradients don't support changing the start and end position.
Examples
Configuration | Description |
---|---|
Start X: 10; Start Y: 20 | The gradient will start 10% from the left and 20% from the top |
End X: 10; End Y: 20 | The gradient will end 10% from the left and 20% from the bottom |
Updated 7 months ago