Gradient Page Background – For Brine

Install Steps

Gradient Page Background – For Brine

Submitted by Inside The Square Works with the Brine 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 //

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


// Diagonal Style - Two Colors //

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


// Vertical Style - Two Colors //

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

Display Three Colors.

// Horizontal - Three Colors //

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


// Diagonal Style - Three Colors //

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


// Vertical Style - Three Colors //

.Main-content {
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.

Keep in mind that this code only works for pages that are not within an index.

Save and refresh the page. 👍

Moov Labs