<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>
<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>
  box-sizing: border-box;
  margin: 0;
  padding: 0;

  display: flex;
  width: 100%;
  flex-wrap: wrap;
      width: 100%;

  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;
    background-color: rgba(black,0.4);
    padding: 0.2rem 0.6rem;
    border-radius: 1rem;
    backdrop-filter: blur(4px);
    backdrop-filter: brightness(1.8);
    backdrop-filter: brightness(70%);
    backdrop-filter: grayscale(100%);
    backdrop-filter: hue-rotate(120deg);
    backdrop-filter: invert(100%);
    backdrop-filter: opacity(0%);
    backdrop-filter: sepia(100%);
    backdrop-filter: saturate(300%);
    backdrop-filter: drop-shadow(1);


  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);
  text-shadow: 1px 1px 2px rgba(black,0.7);
  text-align: center;
  margin-bottom: 1rem;
  font-weight: bold;
  color: white;
  text-decoration: none;
    text-decoration: underline;

  background-color: steelblue;
  color: white;
  padding: 0.3rem 0.8rem;
  border-radius: 1rem;
  font-size: 1rem;
View Compiled
    var toggler = document.getElementById('toggler');
    var blocks = document.querySelector('.blocks');
      if(e.target.innerHTML === 'List'){
        e.target.innerHTML = 'Blocks';
        e.target.innerHTML = 'List';

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.