Backdrop blur with parent element interactions

Then you could apply embed css

Either for the backdrop/interaction

tried that

doesnt seem to work :S

It should. Can you please share preview link

https://preview.webflow.com/preview/isa-galvao-demo-e6f4b2?utm_medium=preview_link&utm[…]2&preview=c3dc12c35d9f15825a12c6417af8604b&workflow=preview

testimonial section

How about applying box shadows?

Backdrop filters only affect semi-transparent elements. If the background is solid, the effect won’t be visible.

thats the wrong section

The same for this

don’t understand how that answers my question. thats not related

To which element you wanna add the blur? The parent / any specific child element

the ones that are blurred haha

Gotcha 😅

honestly i think this is a webflow bug possibly

• Webflow's Move interaction applies transform: translate(), which creates a new stacking context.
• backdrop-filter only works on elements behind the blurred element, but transforms isolate it from the background.
• This means that when the element moves, it breaks the blur effect

Any idea if there is a way around this?

Working on it

Finally!

This works perfectly

.testimonial33_list {
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

Tried multiple options 🤧

But it was a simple fix

Got a chance to check bro @Lukas Stewart?

no that didnt work you’re making the wrong element blurred. I found a workaround now that worked

<style>
  .testimonial33_content-wrapper {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    background-color: rgba(255, 255, 255, 0.5) !important; /* Add some transparency */
    z-index: 1 !important;
  }
  
  .testimonial33_list-left, .testimonial33_list-right {
    will-change: transform; /* This is already in your code */
    transform-style: flat !important; /* Override preserve-3d which can break backdrop-filter */
    backface-visibility: visible !important;
  }
  
  .testimonial33_list, .testimonial33_card-content-right {
    position: relative;
    z-index: 0;
    transform: translateZ(0);
  }
</style>

the above code worked for me it was a simple fix. what did you do

Having just this is fine bro. It did worked for me. Even though we're adding blur to parent element it did worked as expected

.testimonial33_list {
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

Here I've just the above code and it worked perfectly

Please check and give it a try, it is working

no dont you see that that is bluring the space behind the cards too?

It is but not highly noticeable. But glad you figured out the other way.