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!


Squarespace 7.0

This article was written before Squarespace 7.1 was released. The following instructions primarily cover 7.0. For 7.1 instructions, scroll down just a little further.

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 some example code. 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.

Squarespace 7.1

Squarespace 7.1 gets rid of index pages in favor of sections. Here, I’ll walk you through how to find the section selector you’ll need to use the code in this article.

Step 1: Choose a Section

I highly recommend using my Squarespace ID Finder tool to help you copy/paste the code you’ll need. You can install the tool as a bookmarklet, Chrome extension, or Firefox addon.

Once you’re on the page you want to add a gradient background to, turn on the Squarespace ID Finder to find the section selector. You can then click on the section selector to copy/paste it into your code.

Use the Squarespace ID Finder to find section selectors.

Step 2: Add CSS Code

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

Here’s some example code. You’ll find plenty of copy/paste code to use in your own website in the Resources section below.

section[data-section-id="5e604fb74cbc0979d6da3c79"] .section-background {
    background-color: #67cae1;
    background-image: linear-gradient(225deg,#67cae1,#7bd5d7);
}

Here’s what that gradient looks like.

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 (58)

Leave a Comment

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

  1. Any advice on how to amend the CSS to make the gradient in the header nav be transparent, rather than one color to another?

    I’m using —
    .header {
    background-color: #808080;
    background-image: linear-gradient(0deg,#ffffff,#808080);
    }

    — but would like the gradient to be transparent instead of fading to white.

    1. You could try replacing #ffffff (white) in your code with transparent. I may be misunderstanding your request, so let me know if that doesn’t work.

  2. Heather,

    great tutorial and I got one page of mine done with an animated gradient. But I’d like to change the time duration on it. Is there an easy way to (re)find my custom code I inserted and change it?

    1. I would imagine you used the code from the CSS Gradient Animator? If so, you’ll have something that looks like this:

      .css-selector {
          -webkit-animation: AnimationName 30s ease infinite;
          -moz-animation: AnimationName 30s ease infinite;
          animation: AnimationName 30s ease infinite;
      }

      You can change the 30s to be any length of time that you’d like. By default, that’s 30 seconds, but you can speed it up by setting it to a lower number, or slow it down by setting it to a higher number. Play around with it until you get the right timing.

  3. Sarah Piper-Goldberg

    Hey! This is a super helpful tutorial, thank you!

    I am using Squarespace 7.1. I was able to make this work with the individual Section IDs as well as the Item ID, which applied the same gradient for every section on the page, but it ended up looking odd, since each gradient started and stopped within each section on the page. I am trying to make one gradient extend the length of the entire page, basically ignoring the sections.

    I was wondering if there’s a way to do that, or perhaps to add custom CSS to the color theme, which maybe would have the same effect?

    Thank you!

    1. You’ll need to hide the current backgrounds on the page so that the gradient background shines through. Then you’ll need to apply the background gradient to the entire page. You can find the collection-id using the Squarespace ID Finder linked in the post above, as well.

      #collection-id {
          /* Get the collection id of the page. Gradient code goes here. */
      
          .page-section {
              background: transparent;
          }
      
          .page-section .section-background {
              display: none;
          }
      }
      1. Hi Heather, thanks for this, have been looking to sort this for a while and now works perfectly. Only issue I now have is that the top section had a background video playing which now appears to be hidden. I assume this is because I had to make all the backgrounds transparent to reveal the gradient for the whole page. Do you happen to know a fix for this? Am using the Nolan template. Thanks again

        1. You can update the code a bit if you’d like to keep images and videos across the page.

          #collection-id {
            /* Gradient code goes here */
          
            /* Only hides backgrounds on sections that don't have images or videos */
            section:not(.has-background) .section-background {
                display: none;
            }
          
            .page-section:not(.has-background) {
              background: transparent;
            }
          
          }
        2. Also, I wanted to note that I reorganized the code just a bit to prevent this from affecting more than the one page you wanted the gradient on. If you want the gradient on all pages, you can replace #collection-id with body.

  4. Hi, I´d love to make this happen, would it work in Squarespace 7.1 though?
    (I gave it a quick try with no luck..)

    1. Squarespace 7.1 doesn’t use Index pages, so the original code doesn’t work. I’ve updated this post to include instructions for adding gradient backgrounds to the 7.1 sections though. Let me know if you have questions.

      1. Where are you trying to apply it? If it doesn’t work with the code above, you can try removing the .section-background. Some sections work differently than others. I’m still figuring out all the little quirks.

        If you have a link, I’d be happy to take a look.

  5. Hi – I just added to custom CSS:

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

    but nothing is happening on that page….?

  6. Hi! I’m having a hard time with the Jaunt template, I want to use gradient color on my homepage ( the background) but I just can’t figure it out. Can you help me? Thanks!

  7. Hi!

    Is there anyway to do this on the Foster template and have one animated gradient be the bg for the whole site?

    Thank you so much!

  8. Thanks for a great tutorial! Unfortunately, I can’t get this to work using the Avenue template. I’ve tried everything under the sun. The closest I could get is by targeting the index page itself (ID collection) and not an individual index sub-page. Any thoughts?

  9. Hello Heather, Gret tutorial. I seem to be stuck with it though.
    trying to change my navbar background and footer background to a gradient

    linear-gradient(90deg,#9bc1c4,#904c85);

    using the Cacao theme.

    I’ve followed all of the steps and renamed the page titles #”name-here” but I’m not sure this step is necessary for site-wide behaviors based on what I’m reading.

    I’m sure I’m missing a small point here, but a critical one. Your help would be greatly appreciated.

    1. This particular post is about index pages so that’s why you use the page names. To instead target the header and footer in your template, you can target .Header, .Footer, .Mobile-bar--top instead.

  10. I cannot get my awesome animated rainbow gradient to work. Not sure if it’s the template? I updated the title with lower-case, targeted the ID with a hashtag, and pasted my animated gif code into the custom CSS. It said I was missing the “}” at the bottom, so I added that. It still didn’t work. Any ideas? Here’s my site: http://www.kirstieskreations.net/

    1. Hey there! Where are you trying to apply this? It looks like you’re trying to apply this to #home but there is no section with that name according to the Squarespace code. Let me know and I’ll see if I can’t figure out what’s going on.

  11. 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.

  12. 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.

  13. 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!

  14. 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?

  15. 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. 🙂

  16. 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.

  17. 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. Hi! Wondering how you did this? I think I am trying to do something similar.

        Any advice on how to amend the CSS to make the gradient in the header nav be transparent, rather than one color to another?

        I’m using —
        .header {
        background-color: #808080;
        background-image: linear-gradient(0deg,#ffffff,#808080);
        }

        — but would like the gradient to be transparent instead of fading to white.

      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. 🙂

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