Add a color gradient background

A gradient fades from one color into another. It gives a section some depth without needing a photo. You can use one behind a section, a column or a widget, or as a tint over a photo.

Steps

1. Log in to your site editor and open the page.
2. Click the section, column or widget and open its design settings.
3. Find its background color and open the color picker.
4. Above the palette there's a drop-down that may say Color. Open it and choose Gradient.
5. Pick your two colors. Each one is a stop on the blend.
6. Choose the direction:
   • The center option spreads the colors outward in a circle.
   • The side options run the blend in a straight line toward that side.
7. Check the result, then publish. If you don't see a Publish button, tell us and we'll publish it for you.

Good to know

• You can reverse the two colors if you want them the other way round.
• Switching a background between Color and Image clears the settings of the one you left, including any gradient.
• Gradients aren't available for text. Text takes a plain color.
• A gradient can be saved in your Saved Colors list to reuse, but not as one of your site colors. See Save your brand colors.
• Gradients can override the background of individual buttons. If a button's color changes unexpectedly, pick its background color again.

Tips

• Two colors that sit close together on the color wheel look smooth. Colors far apart can look harsh.
• Keep words on a gradient easy to read. The contrast checker in the color picker turns off over a gradient, so look at the page yourself, on a phone as well. See Make your site easier for everyone to read.
• Use your own brand colors so the section matches the rest of your site.

Need a hand?

Email hello@zossoz.com with your business name, the page, the section and your two colors, and we'll take care of it. We reply within one business day. See Request a change.