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
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.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 class 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.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 class 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.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 class 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 color theme class (.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 all Bright section backgroundssection[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;}}