How to Add a Gradient Background to Squarespace

A gradient background is a fantastic way to create an eye-catching effect on your Squarespace website.

It’s awesome if you want to show off your brand colors on your home page or about us section!

If you want to add a gradient background to your Squarespace website, there are two ways to do this.

Option 1: Use CSS

You can use CSS custom code to add the gradient to your Squarespace site. Check option 2 for a code-free way that has many more design tweaks, like animating the gradient.

First, open your Squarespace site and go to Website, scroll down to Website Tools, and Custom CSS.

Then, add the following code to the Custom CSS box. Replace SECTION-ID with your Squarespace section ID code.

SECTION-ID .section-background {
    background: linear-gradient(-45deg, #ff576a, #b81bef) !important;
}

The #ff576a and #b81bef parts of the code are what are known as HEX codes – a combination of letters and numbers that determine the colors of the gradient. In this example, the gradient moves from pink to a purple shade.

Not sure what HEX code to use? This website lets you upload a photo or image and see what the HEX code of a particular color is.

Option 2: Use Spark Plugin

If you don’t know CSS code, this method is the right one for you!

All you need to do is install Spark Plugin and get the Animated Gradient Background customization. Just choose your colors, and you’re all set.

This plugin has an advantage over the first option as it’s animated, meaning your background will cycle through your colors of choice; great for making your site stand out!

Here’s how easy it is to edit your site with Spark Plugin: