<header>
  <h1>CSS Backdrop Filter Examples</h1>
<p>Scroll up and down to see the effect. <br><strong>Firefox does not support backdrop filters by default!</strong></p>
  <p><a href="#" id="toggler">List</a></p>
</header>
<div class="blocks">
  <div class="block drop-shadow"><span>DROP SHADOW</span></div>
<div class="block blur"><span>BLUR</span></div>
<div class="block brightness"><span>BRIGHTNESS</span></div>
<div class="block sepia"><span>SEPIA</span></div>
<div class="block contrast"><span>CONTRAST</span></div>
<div class="block grayscale"><span>GRAYSCALE</span></div>
<div class="block hue-rotate"><span>HUE ROTATE</span></div>
<div class="block invert"><span>INVERT</span></div>
<div class="block opacity"><span>OPACITY</span></div>
<div class="block saturate"><span>SATURATE</span></div>
</div>
*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.blocks{
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  &.list{
    .block{
      width: 100%;
    }
  }
}

.block{
  flex: 0 0 auto;
  width: 50%;
  display: block;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  text-shadow: 1px 1px 2px rgba(black,0.7);
  transition: backdrop-filter 0.2s ease-in-out;
  margin-bottom: 20px;
  span{
    background-color: rgba(black,0.4);
    padding: 0.2rem 0.6rem;
    border-radius: 1rem;
  }
  &.blur{
    backdrop-filter: blur(4px);
  }
  &.brightness{
    backdrop-filter: brightness(1.8);
  }
  &.contrast{
    backdrop-filter: brightness(70%);
  }
  &.grayscale{
    backdrop-filter: grayscale(100%);
  }
  &.hue-rotate{
    backdrop-filter: hue-rotate(120deg);
  }
  &.invert{
    backdrop-filter: invert(100%);
  }
  &.opacity{
    backdrop-filter: opacity(0%);
  }
  &.sepia{
    backdrop-filter: sepia(100%);
  }
  &.saturate{
    backdrop-filter: saturate(300%);
  }
  &.drop-shadow{
    backdrop-filter: drop-shadow(1);
  }

}

body{
  padding: 30px;
  color: white;
  font-size: 1.2rem;
  font-family: Arial, sans-serif;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  background-attachment: fixed;
  background-image: url(https://images.pexels.com/photos/2559941/pexels-photo-2559941.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
}
header{
  text-shadow: 1px 1px 2px rgba(black,0.7);
  text-align: center;
}
h1,p{
  margin-bottom: 1rem;
}
a{
  font-weight: bold;
  color: white;
  text-decoration: none;
  &:hover{
    text-decoration: underline;
  }
}

#toggler{
  background-color: steelblue;
  color: white;
  padding: 0.3rem 0.8rem;
  border-radius: 1rem;
  font-size: 1rem;
}
View Compiled
document.addEventListener('DOMContentLoaded',function(){
  
    var toggler = document.getElementById('toggler');
    var blocks = document.querySelector('.blocks');
    toggler.addEventListener('click',function(e){
      if(e.target.innerHTML === 'List'){
        e.target.innerHTML = 'Blocks';
      }
      else{
        e.target.innerHTML = 'List';
      }
      blocks.classList.toggle('list');
      e.preventDefault();
    });
  
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.