Gradient Page Background – For Bedford

Install Steps

Gradient Page Background – For Bedford

Submitted by Inside The Square Works with the Bedford template family

ezgif-3-158977bdfd69.gif

Step One

From your Squarespace account, go to the Custom CSS Editor: Design > Advanced > Custom CSS

Step Two

There are 6 styles available. Copy and paste one of the codes below into the Custom CSS Editor box.

Display Two Colors.

// Horizontal Style - Two Colors //

#siteWrapper {
background-color: #000000 ; /* make this your darkest color */
background-image: linear-gradient(to right, #F07C63, #E45372);
}


// Diagonal Style - Two Colors //

#siteWrapper {
background-color: #000000 ; /* make this your darkest color */
background-image: linear-gradient(to bottom right, #F07C63, #E45372);
}


// Vertical Style - Two Colors //

#siteWrapper {
background-color: #000000 ; /* make this your darkest color */
background-image: linear-gradient(#F07C63, #E45372);
}

Display Three Colors.

// Horizontal - Three Colors //

#siteWrapper {
background-color: #000000 ; /* make this your darkest color */
background-image: linear-gradient(to right, (#F07C63, #E45372, #88878E);
}


// Diagonal Style - Three Colors //

#siteWrapper {
background-color: #000000 ; /* make this your darkest color */
background-image: linear-gradient( to bottom right, #F07C63, #E45372, #88878E);
}


// Vertical Style - Three Colors //

#siteWrapper {
background-color: #000000 ; /* make this your darkest color */
background-image: linear-gradient (#F07C63, #E45372, #88878E);
}

Step Three

Change the background image color values to your linking.

Set the background color value to a darker color. In case the gradient colors don’t load properly, this color will display instead.

Save and refresh the page. 👍

Moov Labs