How to Create Gradient Background in Squarespace
Add some trendy color transitions to your website
A colorful gradient can make a website visually appealing and dynamic. If you're looking to add a gradient background for your website, Squarespace offers several ways to achieve this effect. Whether you prefer a no-code solution or want full control with CSS, this guide will walk you through different approaches to creating a gradient background in Squarespace.
In essence, there are two ways to add a gradient background for a website in Squarespace – either using Squarespace’s built-in design options (the no-code method), or by applying custom style sheets via CSS.
How to create a gradient background – the different approaches
Although the no-code method requires, well, not coding, it is not straightforward and can yield various results, especially when it comes to productivity. This is because, at the time of writing, Squarespace did not offer an out-of-the-box solution to create a section background gradient. After all, the section background color is set in Squarespace via the style setting for that section, not the section Background setting. Hence, no gradients.
But, there are several hacks you can use to achieve that result with no CSS code.
No-code gradient background in Squarespace
Option one. Use an image background.
Despite the fact that you can’t directly set a gradient as background, you can upload a section background image. You will need the image itself first, of course. The easiest way to do that is to use a tool like Canva or Figma. Simply create a document roughly the size of your section – for example, 1900 px wide by 600 px high – and fill it with a gradient of your choice. Then export as an image and set as background. And voila!
Create a background image in Canva:
Add it as a background to a section in Squarespace:
Of course, this approach has its drawbacks. First, it can be hard to match the background color of the previous section and the next section, if you really want to make the gradient transition seamless. Second, an extra image is extra loading time and, as a result, potentially a lower SEO rating for that page. One background gradient might not be an issue, but if you decide to use them heavily, it might become an issue.
Option two. Use shapes – well, sort of.
In a section where you need to create a background gradient, make sure the “Fill Screen” section option is toggled “Off”. Then, add some rows above and below your section content, as needed
Next, add a shape and then move it all the way back behind all other elements, making sure it stacks behind everything else.
Extend that shape all the way to stretch the width and height of the section container. Enter the shape settings and set Blur to 100%. Next, play with the shape color and the color of the neighboring top and bottom sections, the color of the main section you are working with. It is not 100% a gradient, but it is close enough – at least this is more or less as much as you can achieve without any code or images.
End result:
While these workarounds can be effective for static designs, they tend to lack flexibility and may require trial and error to get just right. They also might not scale well for dynamic content or responsive designs, which is why many users eventually lean toward the CSS method for a more robust and customizable solution.
Using CSS allows you to fine-tune your gradient using precise colour stops, angles, and positioning. You can also target specific elements or sections of your site, giving you more flexibility to create truly customized designs. And it’s much easier than it sounds!
Squarespace gradient background using CSS
Below we share the code which you can use to create pretty much any type of gradient, targeting any section on your website. Speaking of targeting, below we explain how to target sections using section styles. But of course, you can target individual sections by their IDs.
First, install this handy Google Chrome Browser extension. After you install it and run it, you will find a hashtag sign in the upper panel of your browser. Go to your Squarespace website and click on it. You will see the strands of numbers and letters pop up around your page. Section IDs are the blue ones.
To quickly copy a section ID, you just need to click it once.
Keep that ID handy, you will need that in a minute. We now need the actual gradient CSS code. And luckily, we don’t really need to write it! You can use a tool like CSSGradient.io or another generator, just search online for a “CSS gradient generator” and pick something you like. Let’s assume that using CSSGradient.io you have generated the following gradient CSS code:
background: linear-gradient(180deg, rgba(9,9,121,1) 0%, rgba(0,212,255,1) 100%);
Now, simply use the code below to properly target a section you need:
section[data-section-id="ID YOU COPIED GOES HERE"] {
.section-border,
.section-divider {
.section-background {
background: linear-gradient(180deg, rgba(9,9,121,1) 0%, rgba(0,212,255,1) 100%);
}
}
}You can also target all sections of a certain style! When you select a color theme to add to a section, behind the scenes Squarespace adds some CSS targeting, which you can use. For example, one change to the above code will allow you to select all sections that are set to be Bright 1:
section[data-section-theme="bright-inverse"] {
.section-border,
.section-divider {
.section-background {
background: linear-gradient(180deg, rgba(9,9,121,1) 0%, rgba(0,212,255,1) 100%);
}
}
}And to target some other theme, all you have to do is swap “bright-inverse” with another inner theme name. Here we also have you covered – use this handy table to select the right section theme:
| Theme name | Internal name | Section target CSS example |
|---|---|---|
| Lightest 1 | white | section[data-section-theme="white"] |
| Lightest 2 | white-bold | section[data-section-theme="white-bold"] |
| Light 1 | light | section[data-section-theme="light"] |
| Light 2 | light-bold | section[data-section-theme="light-bold"] |
| Bright 1 | bright-inverse | section[data-section-theme="bright-inverse"] |
| Bright 2 | bright | section[data-section-theme="bright"] |
| Dark 1 | dark | section[data-section-theme="dark"] |
| Dark 2 | dark-bold | section[data-section-theme="dark-bold"] |
| Darkest 1 | black | section[data-section-theme="black"] |
| Darkest 2 | black-bold | section[data-section-theme="black-bold"] |
All that is left now is to add the code snippet to your website – from the website admin interface, navigate to Pages -> Website Tools (at the very bottom) -> Custom CSS and simply paste your code snippet there and save.
Interested in learning more about CSS gradients and how to style Squarespace websites like a pro? Get started by downloading our free Squarespace CSS cheat sheet here.
And if you want to learn more about using CSS in Squarespace to build websites that really break out of any Squarespace design limitations, check out our Squarespace CSS Mastery class where we teach you everything you need to know to start designing more freely with Squarespace.
Cheers!
