Creating Gradient Page Backgrounds

 
 

Gradients are a popular design style these days and totally possible in Squarespace with some creative CSS! Check out my tutorial video below on how to change your page background.

Now while most people use their brand colors, you can also make really neat combos on this website here:  https://cssgradient.io/swatches/

Before you start the copy+paste process with these codes below, be sure to grab your two or three hex color values - six digits after the # symbol.

When you are ready, check out the 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:

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 );

}

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 );

}

That’s all folks! I try to record a new Squarespace tutorial every week. If you want to be notified when I post one, be sure to sign up for my email list below!