How to Add an Overlay Color to Images on Squarespace

Color overlays are a useful way to keep your website images consistent with your brand and make text easier to read when it appears over an image.

For example, if blue is your brand’s primary color, adding a subtle blue tint can help your images feel more cohesive.

You can add an overlay color to images on Squarespace directly in the editor, without using Photoshop or Figma. This guide covers image blocks in Squarespace 7.1 Fluid Engine, where you can adjust the overlay for each image.

Why Use Image Overlays on Squarespace?

Adding color overlays supports both branding and usability:

• Enhances brand consistency: Keeps your website visuals aligned with your brand colors.

• Improves readability: Helps text stand out when layered over images.

• Saves time: Adjust overlays directly in Squarespace without opening Photoshop or Figma.

• Easy to update: Change overlay colors or opacity without re-uploading your images.

Need Help with Your Squarespace Website?

Book a free kick-off call to discuss your project requirements in detail. Whether you're launching a new Squarespace website, redesigning an existing one, or looking to improve functionality and user experience, we'll help you explore the best options for your goals.

Step-by-Step: How to Add a Color Overlay in Squarespace

1. Go to Your Site Editor

Open your Squarespace website and navigate to the page you want to edit.

Click Edit, then find the section containing your image.

2. Select the Image Block

Scroll to the image you want to style and double-click it to open the image block editor.

3. Go to the Design Tab

Select the Design tab and find the Overlay toggle.

4. Enable the Overlay

Switch the Overlay toggle on. This adds a colored layer over your image.

5. Choose Your Brand Color

Click the color picker to choose your overlay color. You can:

• Select a color from your brand palette.

• Choose a custom shade that matches your branding.

Use the transparency control to adjust the overlay’s opacity. Lower opacity keeps more of the original image visible, while higher opacity makes the overlay color stronger.

For example, if your brand’s main color is blue, choose a subtle blue overlay that adds a tint while keeping important image details visible.

6. Adjust and Compare

You can apply different overlays to different images to create contrast or highlight specific sections. For example:

• Use a lighter overlay on one image.

• Use a darker overlay on another.

Keep the colors within your brand palette so the website still feels consistent.

Before finishing, check the following:

• Text contrast: Make sure any text placed over an image is easy to read.

• Image details: Keep the subject of the photograph visible beneath the overlay.

• Mobile layout: Preview your desktop and mobile layouts to check the images and any overlapping text.

• Blend Mode: If you use this optional setting, check the result in different browsers, as the effect can look slightly different between them.

Save your changes once you’re happy with the result.

Final Thoughts

Adding color overlays is a simple way to keep your Squarespace website visuals consistent and professional.

With the built-in image block settings, you can adjust colors and opacity without editing or re-uploading your images.