How to Add a Gradient Overlay to Squarespace Background Images

In this tutorial, I'll show you how to add a gorgeous gradient overlay to your page section backgrounds (aka hero images or banner images) using simple custom code. Whether you want to improve text readability or add a professional design touch, this effect will transform your site's look in minutes!

Important update: Squarespace made changes to the program menu in May 2025. If your menu looks different than the video, press the / key to open the program search and search for Custom CSS to navigate there directly.

Here are the codes from this tutorial. 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
}