Active Swiper slide appears blurred on mobile, even though filters are disabled

[emrecankurt]

Hi everyone,

I have a Swiper setup with a “centeredSlides” layout.
For styling, I’m using this pattern:

.smartSwiper .swiper-slide-prev,
.smartSwiper .swiper-slide-next {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(25px) saturate(180%) brightness(1.15);
  border-radius: 16px;
  transition: all 0.4s ease;
}

.smartSwiper .swiper-slide-active {
  filter: none !important;
  backdrop-filter: none !important;
  z-index: 10;
  position: relative;
}

However, on mobile view, the active slide (center one) still looks slightly blurred

I’ve confirmed that:

• filter and backdrop-filter are disabled on the active slide.

• The blur disappears only when I completely remove the backdrop-filter from .swiper-slide-prev and .swiper-slide-next.

• Increasing z-index or overflow: visible doesn’t always fix it, depending on container size.

Is there a reliable way to isolate backdrop-filter from the neighboring slides
so the active slide remains completely sharp — especially on mobile devices?

Tested on: Chrome Devtools (desktop-responsive mode)

[Teodor]

Can you provide a link to your page, where we can check your swiper?