<div class="background">
  <div class="blur"></div>
</div>

<button class="btn" onClick="addFilters()">Toggle Multiple Filters</button>  
// Basic reset
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

// Content we're putting a blur over
.background {
  background-image: url(https://source.unsplash.com/Q7PclNhVRI0);
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  width: 100%;
}

// Background Blur using backdrop-filter
.blur {
  animation: changeWidth 8s ease-in-out infinite;
  background: rgba(255, 255, 255, 0.2); // Make sure this color has an opacity of less than 1
  backdrop-filter: blur(8px); // This be the blur
  border-right: 1px solid whitesmoke;
  height: 100vh;
}

// Multiple filters
.multiple-filters {
  backdrop-filter: blur(20px) saturate(120%) contrast(200%);
}

// Animation that changes the width of the blur
@keyframes changeWidth {
  0% {
    width: 0%;
  }
  5% {
    width: 0%;
  }
  50% {
    width: 50%;
  }
  80% {
    width: 50%;
  }
  100% {
    width: 0%;
  }
}

// Button to toggle multiple-filters class
.btn {
  backface-visibility: hidden;
  background: black;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  left: 50%;
  padding: 12px 16px;
  position: fixed;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 10;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  
  &:focus {
    outline: none;
  }
}
View Compiled
const filter = document.querySelector('.blur');

const addFilters = () => filter.classList.toggle('multiple-filters');
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.