Jump to content

Blur lines between page sections

Recommended Posts

  • 2 weeks later...
  • 1 year later...
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?


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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...

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;


Edited by thearcoirisdesignco
Link to comment


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 {
    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 {
    height:calc(20px + var(--divider-height));

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.




Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.