Adding a Gradient Overlay to Section Backgrounds in Squarespace 7.1

This post will teach you how to add a gradient to section backgrounds in Squarespace 7.1, both with and without a background image. This solution uses Custom CSS. I like it because it targets different section color themes (Lightest 1, Lightest 2, etc) so that you simply choose the desired color theme and the gradient background is added automatically. This makes it a great solution if you or your client would prefer not to fuss with custom code after you set this up.

Gradient section background overlay on background image

Gradient section background without background image

First, you need a CSS gradient style you like. I’ll use a single color/transparent gradient in this example. If you like the look, just switch out the color. You can generate gradients using this web tool, but keep in mind that if the gradient overlays an image, part of it needs to be transparent or semi-transparent.

Next, decide which color theme you want to apply the gradient background to. Any time you select this color theme, the gradient will appear, so you should use a secondary color theme you don’t plan to use otherwise, such as Light 2, Bright 2, Dark 2, etc.

HTML Classes for Squarespace 7.1 Section Color Themes

• Lightest 1 white

• Lighest 2 white-bold

• Light 1 light

• Light 2 light-bold

• Bright 1 bright-inverse

• Bright 2 bright

• Dark 1 dark

• Dark 2 dark-bold

• Darkest 1 black

• Darkest 2 black-bold

Next, decide which style of gradient background you want to apply:

1. Gradient over an image background

2. Gradient without an image background

3. Gradient both with and without an image background

1. Gradient Over an Image Background

To add a gradient over an image background, navigate to the Custom CSS editor in the admin panel (Website->Website Tools->Custom CSS). Paste the following into the CSS Editor:

//diagonal gradient for Bright section backgrounds - image background

section[data-section-theme="bright"] .section-background-overlay {

    background:linear-gradient(155deg, rgba(181, 0, 12, 0.2), #B5000C 90%, #B5000C 100%) !important; opacity:1 !important;

}

This will apply the gradient any time you use the “Bright” color theme with an image background. If you want to use the gradient with a different color theme, switch out the “bright” at the very beginning of the code with the data-section-theme for the color theme you want to use (light-bold, dark-bold, etc).

Then, switch out the color of the linear-gradient itself for whichever color you desire, and make any other desired alterations to the gradient style until it looks just the way you want!

2. Gradient without an Image Background

To add a gradient to a section without an image background, navigate to the Custom CSS editor in the admin panel (Website->Website Tools->Custom CSS). Paste the following into the CSS Editor:

//diagonal gradient for Bright section backgrounds - no image background

section[data-section-theme="bright"] .section-background {

    background:linear-gradient(140deg, transparent 50%, #FCB500) !important; opacity:1 !important;

}

This will apply the gradient any time you use the “Bright” color theme with an image background. If you want to use the gradient with a different color theme, switch out the “bright” at the very beginning of the code with the data-section-theme for the color theme you want to use (light-bold, dark-bold, etc).

Then, switch out the color of the linear-gradient itself for whichever color you desire, and make any other desired alterations to the gradient style until it looks just the way you want!

3. Gradient with or without an Image Background

To add a gradient to a section whether or not that section has an image background, navigate to the Custom CSS editor in the admin panel (Website->Website Tools->Custom CSS). Paste the following into the CSS Editor:

//diagonal gradient for all Bright section backgrounds

section[data-section-theme="bright"] {.section-background, .section-background-overlay {

    background:linear-gradient(155deg, rgba(181, 0, 12, 0.2), #B5000C 90%, #B5000C 100%) !important; opacity:1 !important;

}}

This will apply the gradient any time you use the “Bright” color theme with an image background. If you want to use the gradient with a different color theme, switch out the “bright” at the very beginning of the code with the data-section-theme for the color theme you want to use (light-bold, dark-bold, etc).

Then, switch out the color of the linear-gradient itself for whichever color you desire, and make any other desired alterations to the gradient style until it looks just the way you want!

Applying a Gradient to a Single Section Only

If you don’t want to use a color theme to apply the gradient but want instead to target one individual section only, you should swap out the Section ID for the data-section-theme (“bright”). To find the Section ID, install the Squarespace ID Finder extension in Chrome and use it to identify the section id. Your final code would look something like this:

//diagonal gradient for a certain section

section[data-section-id="64ade10958efd33b122b4eab"] {.section-background, .section-background-overlay {

    background:linear-gradient(155deg, rgba(181, 0, 12, 0.2), #B5000C 90%, #B5000C 100%) !important; opacity:1 !important;

}}