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, either with custom CSS or Spark Plugin.

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 Dynamic Backgroundcustomization. Just choose your colors, and you’re all set, no code needed.

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 are some other gradients you can create with Spark Plugin:

And that’s not all. With Spark Plugin you get access to over 150 amazing customizations.

Enhance your text, animate your call-to-action buttons, or transform how your header menu looks… The choice is yours!

---

Now you know two cool new ways how to add a gradient background in Squarespace.

Which option will you use to transform the look and feel of your site?