Add a Colour Gradient to Backgrounds

What does this code do?

This code snippet will allow you to add a colour gradient to backgrounds.

Create your CSS Gradient

First, decide on how you would like your gradient to look. Go to https://mycolor.space/gradient and design the gradient code you would like.

Save the code generated from the word “linear” to the “ ; ” . In the example above, I would save the code outlined in red.

linear-gradient(93deg, rgba(2,0,36,1) 13%, rgba(3,1,43,1) 15%, rgba(9,9,121,1) 43%, rgba(0,212,255,1) 78%);

Code Snippets

Copy and paste the following code into Design > Custom CSS.

SELECTOR {
  background: -webkit-CODE GOES HERE;
}

Then change the word SELECTOR to one of the selectors below.

Squarespace 7.0

/* One Page */
#COLLECTIONID

/* The Whole Header */
.Header 

/* The Whole Footer */
footer

/* The Top Footer Section */
.Footer-blocks--top

/* The Middle Footer Section */
.Footer-blocks--middle

/* The Bottom Footer Section */
.Footer-blocks--bottom

/* One Section */
#PAGEID

Squarespace 7.1

/* All Sections on a Page */
#COLLECTIONID .section-background

/* The Whole Header */
/* Make sure the header colour is set to transparent */
.header 

/* The Whole Footer */
#footer-sections .section-background

/* One Section */
/* Make sure there is no background image set */
#COLLECTIONID #page .page-section:nth-of-type(1) .section-background

Then replace CODE GOES HERE with the code you saved from the Color Gradient Generator. For example, your code will look something like…

SELECTOR {
  background: -webkit-linear-gradient(93deg, rgba(2, 0, 36, 1) 13%, rgba(3, 1, 43, 1) 15%, rgba(9, 9, 121, 1) 43%, rgba(0, 212, 255, 1) 78%);
}

How To Use It

1. Use https://mycolor.space/gradient to create the colour gradient you would like. Save the code from “linear” to the “ ; “

2. Copy and paste the code snippet as indicated above.

3. Choose the selector that matches your situation.

4. To learn how to find a collection id, page id, or block id check out our Start Here guide.

5. If targeting one section in Squarespace 7.1, change the 1 to match the section you are trying to change.

6. Note that we have the -webkit- in front of the word linear to help support your gradient across multiple browsers.