Blur lines between page sections

I have a picture with a colour almost identical to the background colour of the next section. Is it possible to make the "line" between the two sections blurry in order to blend them together?

Can you share site url? We can check easier

Hi again Tuan, I need to do the same thing.

I have an image between two white sections, but I'd like to blur the top and bottom lines so there's a blended look?

https://beige-oleander-mp66.squarespace.com/

On 3/22/2022 at 5:27 PM, Iwan said:

Hi again Tuan, I need to do the same thing.

I have an image between two white sections, but I'd like to blur the top and bottom lines so there's a blended look?

https://beige-oleander-mp66.squarespace.com/

Your site is private. Can you setup password & share url again?

Thanks Tuan! It's tuansqsp

Please see attached image, blur hard line between white and section top below. (homepage)

Hi @tuanphan or @Jia, please can you reply to the above request re bluring the hard line between sections?

Was a solution ever found for this? I've managed to blur sections together which causes a seamless blend between the sections, but it also causes a blur over the content of the section because the filter is being applied to the entire section. I can't figure out how to just target the divider.

Code I have so far is as follows:

.has-section-divider, .section-border {
    filter: blur(1rem) !important;
    
}

.section-border .content-wrapper {
    filter: blur(0rem) !important;
}

@thearcoirisdesignco

you'll have a problem there because the section border / section background stuff is the full height of the section. you'll also have to be careful because of the section-divider clip-paths that squarespace use to do wavy lines between sections. However, it's not that hard to get the effect you're looking for.

Essentially you have to place a block of content neatly over the join of the sections, make sure that that is pulled out of the flow of the document so that it appears over the sections, then apply a backdrop-filter. The filter you've tried to apply blurs the element itself, whereas a backdrop-filter blurs the elements behind.

something like this:

section:nth-of-type(n+2) .section-background::before {
    content:'';
    display:block;
    position:fixed;
    left:0; 
    right:0;
    top:0;
    height:20px;
    z-index:999;
    transform:translateY(-10px);
    backdrop-filter: blur(2px);
}

• nth-of-type is applying it to all sections apart from the first one
• put a pseudo element in before which sits at the top of that section
• position is fixed as we want it to come out of the document flow of the sections
• the height is the height of the blur div.  (20px)
• you transform it to move it back have the height of the div (10px) so it overlaps the sections
• backdrop-filter does the work. you want to make sure that your blur distance is less than 25% of the height of your blur container (so 5px in my case) as this will cause a hard line.

if clip paths are involved, you'll need to do something different as these are rendered differently. in those cases the section divider is padded out at the bottom by the divider height so you'd need to blur out the padded section at the bottom, trying some similar ideas to overlay the clip path by a certain boundary.

.has-section-divider::after {
    content:'';
    display:block;
    position:absolute;
    left:0;
    right:0;
    bottom:-10px;
    height:calc(20px + var(--divider-height));
    backdrop-filter:blur(3px);
    transform:translateY(5px);
}

You can see the effect of these in the graphic below , and I've added another with a red highlight to show where these new elements end up overlapping their sections and how the two differ.