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