How to Add a Gradient Overlay to Squarespace Background Images

In this tutorial, we’re diving into a fun and stylish customization for your website: adding a gradient overlay above a page section background image but beneath the content. This effect is perfect for giving your site a polished, professional look while maintaining its readability.

All the code you need is listed below, so let’s get started!

To create the gradient overlay, navigate to your Custom CSS panel:

1. Go to Pages > Website Tools > Custom CSS.

2. Paste the following code into the CSS panel. I want to encourage you to get creative with these! Update the values to match your own unique website and try some of the additional gradients in my free guide:

/* gradient overlay code from insidethesquare.co */
.section-background-overlay{
  opacity:1!important;
background: linear-gradient(to bottom, transparent, #000)!important
}

Apply the Gradient to a Specific Section

If you only want the gradient overlay on certain sections of your site, you’ll need the data-section-id for that page section. Here’s how to find it:

1. Use a free Chrome extension from Will Myers to grab the unique data-section-id for your section. I’ve linked the extension below.

2. Copy the ID, then update your CSS like this:

/* gradient overlay code from insidethesquare.co */
[data-section-id="12344"] .section-background-overlay{
  opacity:1!important;
background: linear-gradient(to bottom, transparent, #000)!important
}