How to Add a Blurred Frame Image to a Squarespace Section
One of the simplest ways to make a Squarespace section stand out is by adding a blurred frame around the background image. It creates a soft, frosted border that draws the eye inward and gives the section real depth. No JavaScript. No plugins. Just a few lines of CSS.
I first built this effect when designing Alexandria Agresta's Squarespace site. Her brand is bold and high-energy, and the standard section layouts weren't doing enough to match that. The blurred frame gave her sections a polished, editorial feel that worked perfectly with her imagery.
This Squarespace CSS tutorial shows you exactly how to recreate it on your own site. It takes about two minutes, and I've included a code generator so you can plug in your own values and copy the finished CSS.
What Is the Blurred Frame Effect?
In Squarespace, every section has a .section-border element that sits behind the main content. When you enable an inset border on a section through the Squarespace editor, a visible gap appears between the section edge and the content area. That gap is the border layer.
Normally, the border layer is just a solid color. But with a bit of custom CSS, we can load an image into that layer and apply a blur filter to it. The result is a soft, frosted frame that wraps around your section content. The main background image stays sharp, and the border becomes a blurred version of the same image (or a different one if you prefer).
It's a subtle effect that looks like it took a lot of effort, but the code is only six lines of CSS.
Hero sections, about pages, personal brand intros, and anywhere you want to frame a portrait or full-width photo with a soft blurred edge. It works great for coaches, photographers, creatives, and anyone with strong imagery on their Squarespace website.
Step-by-Step Tutorial
Enable the Inset Border on Your Section
Open the Squarespace editor and click on the section you want to add the effect to. Go to the section's Design settings. Under Border, turn on the Inset border option. This creates the visible gap between the section edge and the content area that we'll fill with our blurred image.
Get Your Image URL
You'll need a direct URL to the image you want to use for the blurred border. The easiest approach is to upload the image to your Squarespace site (through a page or the asset manager), then right-click the image on your live site and select Copy Image Address. That gives you the full Squarespace CDN URL.
For the best result, use the same image that's already set as the section's background. That way the blurred frame feels like a natural extension of the photo.
Generate or copy your CSS
Use the code generator below to enter your section ID, image URL, and blur preferences. It builds the complete CSS for you. If you'd rather start with the raw snippet, grab the default code from the section after the generator and replace the placeholder values yourself.
Add the CSS to Your Squarespace Website
Go to Website > Website Tools > Custom CSS in your Squarespace dashboard and paste the code. Save, then preview the page on both desktop and mobile. If the blur feels too strong or too soft, tweak the blur() value. If the image isn't positioned right, adjust the background-position property.
Code Generator
Enter your section ID and image URL below, adjust the blur and position settings, and copy the finished CSS. The output updates in real time as you type.
/** INSET BORDER BLURRED FRAME **/
[data-section-id="YOUR-SECTION-ID"] .section-border {
background-image: url('YOUR-IMAGE-URL');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
filter: blur(8px);
}
The Default Code
If you'd rather work with the raw snippet directly, here's the full CSS. The two values highlighted in orange are the ones you need to swap out with your own section ID and image URL.
/** INSET BORDER BLURRED FRAME **/ [data-section-id="INSERT-YOUR-SECTION-ID-HERE"] .section-border { background-image: url('INSERT-YOUR-IMAGE-URL-HERE'); background-size: cover; background-position: center; background-repeat: no-repeat; filter: blur(8px); }
How It Works (The CSS Behind It)
If you're curious about why this effect works, here's what's happening inside Squarespace's section structure.
Each section has three visual layers stacked on top of each other:
The .section-border layer sits behind everything else. When you turn on the inset border in Squarespace, this layer becomes visible around the edges. By default it's empty. Our CSS loads an image into it and blurs it, creating the frosted frame look.
The background image in the middle layer stays completely untouched. The blur only applies to the border layer behind it. That's why the effect looks so clean: sharp content in the center, soft blur around the edges.
How to Customize the Effect
Adjust the Blur Strength
The filter: blur(8px) value controls how blurry the frame looks. A lower number like blur(4px) keeps more image detail visible. A higher number like blur(15px) creates a softer, more abstract look. Play with it until it feels right for your design.
filter: blur(4px); /* lighter, more detail visible */
filter: blur(15px); /* softer, more abstract */
Change the Image Position
If the blurred frame isn't showing the right part of the image, adjust the background-position property. The default is center, but you can use values like top, bottom, left, right, or specific coordinates like 50% 30% to shift the focal point.
background-position: center top;
Use a Different Image for the Frame
You don't have to use the same image as the section background. You could use a texture, a gradient, or a completely different photo. Just swap out the image URL in the CSS. This opens up a lot of creative options for your Squarespace website design.
Add a Color Tint
Want a color-washed blur instead of a plain photo blur? Layer a semi-transparent overlay by combining the blur with a gradient background. Here's an example that adds a pink tint:
/** TINTED BLURRED FRAME **/ [data-section-id="INSERT-YOUR-SECTION-ID-HERE"] .section-border { background: linear-gradient(rgba(226, 0, 1, 0.3), rgba(226, 0, 1, 0.3)), url('INSERT-YOUR-IMAGE-URL-HERE'); background-size: cover; background-position: center; background-repeat: no-repeat; filter: blur(8px); }
Common Questions
Do I need to enable anything in Squarespace first?
Yes. The inset border needs to be turned on for the section. Without it, the .section-border layer isn't visible and there's nothing to show the blurred image on. Go to your section's Design settings and enable the Inset border option.
Will this affect my section's main background image?
No. The blur filter only applies to the .section-border layer, which sits behind your section's background. Your main background image and all content on top of it stays completely sharp and unaffected.
Does this work on mobile?
Yes. The effect is fully responsive and works across all screen sizes. The blurred border scales with the section just like any other Squarespace element. Just check that the background-position looks good on smaller screens, since the crop changes as the viewport narrows.
Can I use this on multiple sections?
Absolutely. Copy the CSS block for each section, swapping out the data-section-id and background-image URL for each one. You can use different images and different blur strengths for every section on your Squarespace website.
The image URL isn't working. What's wrong?
Make sure you're using a full URL that starts with https://. If you copied the URL from the Squarespace editor rather than the live site, it might be a relative path that won't work in custom CSS. Right-click the image on your published, live site and select Copy Image Address to get the correct URL.
Looking for a refreshed web presence?
Looking for a website that truly represents your brand and drives results? Minimist is a Squarespace designer, specializing in minimal, modern designs that connect with your audience and make an impact. If you have a project in mind, I'd love to hear from you!
Book a Free Consultation
