Add gradient background to a text element using CSS
This tutorial will show you how to add gradient background to a text element like the following:
Select "Tools" > "CSS Style Editor" from the main menu or press this button on the toolbar.
Create a new style by clicking on the "Add" button on the right. Then rename it to "gradient-background" by clicking on the "Rename" button or pressing the "F2" key.
Click on the "Background" tab on the right and select the option "Gradient" at the bottom of the tab.
Click on the "Edit Gradient" button to open the Gradient Editor.
You can define your gradient here or start with a preset. We choose the 2nd one on the 2nd line. Then click on this button . The gradient will run from the top to the bottom.
Click on the OK button to save this new gradient.
While still on the "Background" tab, select the option "Color". Set the color to " #4995C1. This is for browsers not supporting CSS gradient.
Click on the OK button to save this new style.
The new style will now appear on the "Available CSS Styles" panel in the "CSS Styles" tab as shown below.
Open a page and insert a text element on the page by selecting "Insert" > "Text" from the main menu or clicking on this button on the toolbar. You may like to resize the text element to a bigger one.
To apply this style to the text element on the page. Drag the style "gradient-background" from the "Available CSS Styles" and drop it to the element on the page. If that element is selected, you can just drag the style "gradient-background" and drop it to the "Page / Element CSS Styles" panel above. Both will result in the following:
on the toolbar.
. The gradient will run from the top to the bottom.
on the toolbar. You may like to resize the text element to a bigger one.