Creating Gradient Page Backgrounds

 
 

Gradients are a popular design style these days and totally possible in Squarespace with some creative CSS! Now while most people use their brand colors to create a gradient, if you aren’t feeling that creative, I made some for you. Download my free Guide To Gradients for a PDF with over 20 color blends you can use on your own Squarespace site.

Anywho, once you have your HEX color codes ready, check out my tutorial video, and to try it on your own site, grab the codes below!

 

SUPER IMPORTANT NOTE

This code are for Bedford and Brine family templates, but can easily be updated for other theme families. If you aren’t sure which template you are using, My Getting Started with CSS guide can help! Download it for free here on my site:

Brine Sites

//HORIZONTAL//

.Main-content {

background-color: #000000 ; /* make this your darkest color */

background-image: linear-gradient(to right, #000000 , #FFFFFF );

}

//DIAGONAL//

.Main-content {

background-color: #000000 ; /* make this your darkest color */

background-image: (to bottom right, #000000 , #FFFFFF );

}

//VERTICAL//

.Main-content {

background-color: #000000 ; /* make this your darkest color */

background-image: linear-gradient( #000000, #FFFFFF );

}

//HORIZONTAL - THREE COLORS//

.Main-content {

background-color: #000000 ; /* make this your darkest color */

background-image: linear-gradient(to right, ( #000000, #666666, #FFFFFF );

}

//DIAGONAL - THREE COLORS//

.Main-content {

background-color: #000000 ; /* make this your darkest color */

background-image:( #000000, #666666, #FFFFFF );

}

//VERTICAL - THREE COLORS//

.Main-content {

background-color: #000000 ; /* make this your darkest color */

background-image: linear-gradient( #000000, #666666, #FFFFFF );

}

Bedford Sites

//HORIZONTAL//

#siteWrapper {

background-color: #000000 ; /* make this your darkest color */

background-image: linear-gradient(to right, #000000 , #FFFFFF );

}

//DIAGONAL//

#siteWrapper {

background-color: #000000 ; /* make this your darkest color */

background-image: (to bottom right, #000000 , #FFFFFF );

}

//VERTICAL//

#siteWrapper {

background-color: #000000 ; /* make this your darkest color */

background-image: linear-gradient( #000000, #FFFFFF );

}

//HORIZONTAL - THREE COLORS//

#siteWrapper {

background-color: #000000 ; /* make this your darkest color */

background-image: linear-gradient(to right, ( #000000, #666666, #FFFFFF );

}

//DIAGONAL - THREE COLORS//

#siteWrapper {

background-color: #000000 ; /* make this your darkest color */

background-image:( #000000, #666666, #FFFFFF );

}

//VERTICAL - THREE COLORS//

#siteWrapper {

background-color: #000000 ; /* make this your darkest color */

background-image: linear-gradient( #000000, #666666, #FFFFFF );

}



Pretty cool right?!

If you have a color blend you made for your Squarespace site, I want to see it! Share it in the comments below ♥