System updates

We’re experiencing issues that may affect your Square services. We’ll continue to update our status page with more information.

Home>Building Your Website

Add a Colour Gradient Background

Adding a gradient background is an easy way to make your content stand out. Just like solid colour backgrounds, gradients can be added to individual sections on a page or to a single section to fill the whole background area.

gradient-finished

Click on the section you want to add a gradient to, and click Edit Background. Select Gradient, and then click on Change Gradient to add your colours and adjust the settings.

gradient-button

You can change the colour by dragging the slider across the spectrum bar at the top and then fine-tune the lightness and saturation of the colour by dragging the circle around the colour swatch field below. You can also enter a hex code if you know exactly which colour you want. Once you’ve chosen a colour, drag the angle and start position sliders to adjust the angle and intensity of the gradient.

gradient-drag-change

When you’re done, click the arrow on your first colour to go back and pick a second colour using the same process. You can change the start position for the second colour individually, but the angle setting applies to the entire gradient.

gradient-second-color

Can't find what you need?