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

 Asana's homepage uses a wavy gradient background made up of purple, red, and orange.

Hubspot

 Hubspot's homepage uses a red to orange gradient background for the first section.

Stripe

 Stripe's homepage uses a blue to green background gradient.

 

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!


Comments (33)

Leave a Comment

Your email address will not be published. Required fields are marked *

  1. Hi Heather! Thank you so much for taking your time to teach us how to do this. This is exactly what I’m looking for.

    Unfortunately, I’m having trouble getting it to work. I thought I followed step by step, but I wouldn’t be surprised if I did something wrong, lol. Could you help me please?

    1. Happy to help. I sent you an email so that I can get a link from you to help troubleshoot on the page you’re working on. Feel free to also leave the link here.

  2. If I wanted to do this across all pages on my site, how would I do that?

    Also, when you say "convert your index name" do you mean we need to do this somewhere in squarespace, or simply in our heads for the code? With the homepage being, #home.

  3. Great tutorial! I can’t seem to get to get this to work on my homepage index section "home".
    I can only get it to work on the footer!

    Thank you!

  4. Thanks a million!
    I am using Ethan template, looking to apply a grade across all pages and while the code worked earlier on one specific page, it never showed up published and now doesn’t work at all, even in edit mode. Do you have any tips?

  5. Thanks for the great tutorial Heather! I’m trying to make this work using the Jasper template (York family of templates), but I’m not sure how to format the tag to work on the homepage. I appreciate any assistance you could provide!

    1. You’re trying to add a gradient background to the entire homepage background? If so, you’ll need the specific id for your homepage (#collection-5b5a06ee8a922dd7d7885d6e). So then you can use the following code:

      #collection-5b5a06ee8a922dd7d7885d6e .overflow-wrapper {
      // gradient code goes here
      }

      Try that and let me know if it works. If that’s not the look you’re going for, just let me know where you’re trying to place the color background. 🙂

  6. Hi Heather! This is SUCH a fantastic resource. Would you be able to help me figure out how to apply a CSS gradient to the entire site background in the Kent theme? I can’t figure out what tag I’m meant to call to.

  7. Hey Heather,

    Great tutorial. Any chance you’ve figured out a way to get the nav included in the hero banner’s gradient animation? If I target the sections via CSS separately (header & hero banner), the animation is slightly off. Any way to seamlessly target both sections so that the animation isn’t off? Many thanks!

      1. Hey, it may depend on how your header is set up. Try this:

        header.Header.Header–top, .Mobile-bar.Mobile-bar–top {
        // Gradient Background Code Goes Here
        }

        What this does is target the top header on desktop AND the header on mobile. If this doesn’t work for you, leave me a link to your website here or email me at heather@heathertovey.com. I’d be happy to look it over for you.

    1. Thank you! Yes. Instead of going through steps 1 and 2, you’ll apply the gradient code you’ve chosen to footer.

      So it should look similar to:

      footer {
      background: #B24592; /* fallback for old browsers /
      background: -webkit-linear-gradient(to right, #F15F79, #B24592); /
      Chrome 10-25, Safari 5.1-6 /
      background: linear-gradient(to right, #F15F79, #B24592); /
      W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
      }

      This may not work on your specific Squarespace template though. If you let me know which template you’re using, I can double check what code to use.

      1. I’m using Brine so that worked perfectly! Thank you! I was trying to use #footer as the first line, which is why I couldn’t get it to work on my own. Argh.

        1. Yeah, Brine uses .Footer instead of #Footer. "footer" will usually handle most templates, but code likes to be stubborn sometimes and none of the templates seems to use the same coding guidelines. 😀

          Glad it worked out for you!

      1. Oh, I see what’s happening. It’s because your copy and pasted my code directly, but you’ll need to change it to work for your specific settings. Follow Step 2 to get the id that you need for this code to work on your website. 🙂

  8. Thanks for this post, especially sharing the Animated CSS color gradient generator! It has been super useful.