How to Remove Unwanted Color Overlays from Images in Squarespace 7.1
If you’ve slapped a graphic on your Squarespace site and for some reason, it seems to display with a color overlay (typically when it should be white, transparent, or clean), you’re not the only one. This problem is quite prevalent in Squarespace 7.1 and is related to template defaults, design settings, and custom CSS.
In this guide, you will get to know some of the best ways to identify and remove unwanted image overlays that can be preventing background images, image blocks, banners, or galleries from displaying correctly.
Why Does This Happen?
Among other such automations, Squarespace 7.1 has these styling rules pre-baked in it that apply overlays and hover effects to improve the legibility and/or the looks of but a lot of times it comes in the way of your own picture-perfect display.
This is particularly noticeable when:
A white image will look grey or colored
You notice a subtle tint on product images or banners
When you hover over an image, its brightness or color changes
Common Causes and How to Fix Them
Image Block Design Settings
Problem:
The image block is using an overlay or design style that applies a color layer by default.
Solution:
Go to Pages → Edit Section
Hover over the image and click Edit
Navigate to the Design tab
Set “Image Overlay” or “Image Effects” to None
Section Background Overlay
Problem:
Your image is set as a background, and the section uses a transparent overlay or color layer.
Solution:
Hover over the section → Click Edit Section
Open the Colors or Background Overlay tab
Set Overlay Color to white or fully transparent
Adjust Overlay Opacity to 0%
Custom CSS
Solution:
Navigate to Pages → Custom code → Custom CSS and add:
.sqs-block-image .image-block-outer .fluidImageOverlay {
background: none !important;
opacity: 0 !important;
}
This snippet removes the most common overlay layers applied globally to image blocks.
Template Defaults (Brine, Paloma, Five, etc.)
Problem:
Templates like Brine often include built-in overlay effects on image blocks, banners, and index pages.
Solution:
Go to Design → Site Styles
Look for "Image Overlay," "Card Background Color," or "Image Fade"
Set overlay color to #ffffff or transparent
Adjust opacity or remove image effects altogether
Quick Diagnostic Tip
Use your browser’s Inspect Element tool to check if an overlay element (:: before, .overlay, or .background-color) is being applied. This helps you trace whether the issue is code-based or coming from Squarespace's design system.
Summary
Final Thoughts
Not only does this spoil the clarity and crispness of an image, it can also make a white or light image look dirty or bad. Whether you’re making a portfolio, an e-commerce page, or a landing page, you just have to establish clear visuals.
Frequently Asked Questions
-
This is typically because Squarespace applies default overlays for readability or on hover effects. And these overlays can add a subtle color wash, rendering light images gray or colored.
-
Edit the block → open the Design tab → choose None under “Image Overlay” or “Image Effects”. It turns off the built-in overlay for this particular image.
-
Many templates have a background overlay at the section level. To correct this, Inf Open Section → open Colors / Background Overlay → set the overlay color to transparent or drop the opacity to 0%.
-
Yes. Templates such as Brine or Paloma have this built into the Site Styles area. Customizations You can edit and remove them by adjusting Image Overlay, Card Background Color, or Fade settings in the Design → Site Styles panel.
-
Use your browser’s Inspect Element tool to see if an overlay is added by CSS (like .overlay, ::before, or .background-color). This will show whether the overlay comes from Squarespace design settings or custom CSS.
