How to Add Colorful Gradient Backgrounds In Squarespace

If you're a big fan of color, it's possible that you also love color gradients.

 How to Add Colorful Gradient Backgrounds in Squarespace

What's a gradient? A gradient in web design is an area filled with color where one color flows naturally into another color.

For example, this block has a gradient background.

Gradients in Web Design

Here are a few examples of gradients that you may have seen around the web.

Asana

Hubspot

Stripe

 

So how do you add gradients to your Squarespace website?

Now that you've seen a few ways that big companies use gradients on their websites, let's go over how you can add gradients to your website!


Note: For the purposes of this tutorial, I'm going to specifically talk about adding gradients to Squarespace Index pages. If you want to add a gradient background to a different part of your website, head to the comments and let me know. I'm happy to add extra examples over time.


Note 2: I use the Brine template, and that's what this tutorial is based on. The methods in this tutorial should work in all Squarespace templates, but please let me know if you run into a template where it doesn't work.


Step 1: Choose an Index Section

Before you can add any CSS code, you have to decide which Index Section is going to get a beautiful background gradient.

To do this, open up your settings, and navigate to the list of pages on your website. Under the Index Page, you'll find a list of Index Sections.

For example, I use a subtle gradient on the 2nd Index section found on my homepage. So in my settings, I can see that I named the 2nd Index section on my homepage "Get Unstuck."

 In the Squarespace settings sidebar, you can access a list of your page titles.

Step 2: Convert the Index Section Title into a Section ID

To add CSS to my "Get Unstuck" Index Section, I have to convert the page title into a section ID that I can use in my CSS code. 

To convert your Index Section page title into a section ID:

  • make your page title all lowercase
  • replace any spaces in the title with hyphens
  • add a # symbol at the beginning of the section ID

"Get Unstuck" becomes "#get-unstuck".

"Your Page Title Here" becomes "#your-page-title-here".

If you have trouble with this step, leave a note in the comments with your website URL, and I'll take a look and help you find the section ID you want.

Step 3: Add CSS Code

Once you have the Section ID, you can add CSS code. I recommend placing this code in Design > Custom CSS.

Here's the code I used to add a gradient background to the 2nd section of my homepage. You'll find plenty of copy/paste code to use in your own website in the Resources section below.

#get-unstuck {
    background-color: #67cae1;
    background-image: linear-gradient(225deg,#67cae1,#7bd5d7);
}

Here's what that gradient looks like.

There are 7 parts to this CSS code, so let's break it down a bit so you know what's happening.

  1. The # symbol is used to tell the browser that you're targeting an id on your page.
  2. After you write the # symbol, write the name of your page-section-title (remember to convert your page title to lowercase and replace spaces with hyphens). This will tell the browser which section to add the gradient background to.
  3. Add a background-color. Some older browsers can't show background gradients and will show this solid background color instead.
  4. Give your page section a background-image with the linear-gradient value.
  5. Inside the linear-gradient value, choose the degree or angle of the gradient. I like a nice angled gradient, so I chose 225deg. But you can choose another angle (between 0deg and 360deg) or remove this section entirely to get the default angle.
  6. Inside the linear-gradient value, write down Color1.
  7. Inside the linear-gradient value, write down Color2. The gradient will flow from Color1 to Color2.

This is an example of a basic color gradient, but you can make them much more complicated if you choose.

Resources for Gradient CSS Code

Luckily for us, there are a ton of resources that will give you the specific code you need to create gradient backgrounds.

Once you know the ID of the section or block you're targeting, you can simply copy and paste the gradient code from these resources.

I recommend using uiGradients to find gradients you like and copy/paste code.

 uiGradients website with multiple options for choosing gradient colors.

uiGradients has plenty of different gradients to choose from and is a great way to get started with gradient backgrounds.

Once you choose a gradient, click on the CSS Code button in the top-right corner to get access to the code that you can copy/paste into Squarespace.

 Clicking the CSS Code button will give you a popup of CSS Code that you can copy directly.

After you get comfortable with the code for adding CSS gradients, check out these extra resources for curated gradients:

 

Bonus! Animated Gradient Backgrounds

This block has an animated gradient background.

To get an animated gradient background, I recommend using this CSS Gradient Animator. Simply choose which colors you want in your gradient, and then copy/paste the code provided for you.


What are your favorite examples of gradients in web design? Leave a comment and let me know!