Use colour gradients as backgrounds

Color gradients as backgrounds create a nice effect and look more dynamic than single-color backgrounds. Of course, you can also use both background design options in your website at the same time. For further information, refer to Edit the background color of content elements.

How to set a gradient background

Once you've added a content element to a page, you can set a color gradient as a background. All changes will be directly shown in the preview area of the Editor.

1. Select the content element or hover over it. You'll see a blue bar at the top of the content element.
2. In the blue bar, select .
3. Select the Gradient background option.
4. Select whether you want to use 2 colors or 3 colors.
5. If you want to change the direction of the gradient, select the Switch color direction link.
6. Pick the colors you want to use for your gradient by selecting the color squares. You can find further information under Learn more about the color settings.
7. Under Orientation, select whether you want to have a horizontal , vertical , or diagonal gradient.
8. If you want to restore the default background design for this content element, select the Reset link on the Edit background design view.
   Note that this will restore the default color of your theme, not the color you selected earlier (if you have already done so). If you want to keep the color that was selected when you started editing, you must cancel the process by selecting Cancel.
9. Select Save.

You have set a color gradient as the background design. To set a gradient background for other content elements or to edit a color gradient again, repeat the steps above. Your changes will be directly applied to your website

Tips for the different gradient settings

• To create different effects, you can for example pick the 3 color option but set the same color for two of them.
• If you use similar colors, you'll create a more subtle effect, while very different colors can have a more dramatic effect.
• If you want to create a softer transition, you can set a single-color background for the first content element and only set a vertical gradient background for the second content element starting with the color of the first element. This can look like this:

Note

For more tips, also refer to Edit the background color of content elements.