To add gradients, you can use the "UI Pattern" block. This block can be found in the "UI & Code" section here:
Simply enter the CSS style for this gradient. Here’s an example of a gradient from a blue to a green, using their HEX codes:
.gradient {
background: linear-gradient(to right, #5bc0de, #5cb85c);
width: 450px;
height: 250px;
}This is how the CSS looks in the UI Block:
After adding the CSS style, don't forget to add the HTML to display your gradient visually above:
<div class="gradient"></div>
This is how the HTML looks in the UI Block:
The result is a gradient:
You can change the CSS styling to display the gradient you prefer.
*Please Note:
If you are adding multiple gradient UI Pattern blocks to one page, each gradient must be named uniquely or else one block will serve as the styling for all blocks. For the examples above, they could be named "gradient-1", "gradient-blue", and "gradient-rainbow". Please be sure to use the same name in the CSS and HTML tabs.