Use colour gradients as backgrounds

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

How to set a gradient background

Once you've added a content element to a page, you can set a colour 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 colours or 3 colours.
5. If you want to change the direction of the gradient, select the Switch colour direction link.
6. Pick the colours you want to use for your gradient by selecting the colour squares:
   • Select your desired colour from the colour palette .
   • You can also select one one of the predefined colours . These always include the basic colours black and white. Furthermore, you'll find the currently selected shop colours here.
   • To pick an exact colour shade, you can also enter a hex colour code in the input field .
     If you want to use a specific colour for your shop, you can use a colour picker to identify the corresponding hex code. This way you can quickly select the exact shade. Colour pickers are available for free on various websites and as extensions for the most popular browsers.
   • Note that the Reset link restores the default colour of your theme, not the colour you have previously selected (if you have already done so).
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 colour of your theme, not the colour you selected earlier (if you have already done so). If you want to keep the colour that was selected when you started editing, you must cancel the process by selecting Cancel.
9. Select Save.

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

Tips for the different gradient settings

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

Info

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