Backdrop Filter

9 Feb 2022 in the blog section Updated: 25 Mar 2024

Tagged in: backgrounds , filters , hover , pseudo-elements , hover , interactive

The CSS backdrop-filter property works very similarly to the filter property. Both offer a range of different filter effects. But whereas filter applies these to an element, such as an image, the backdrop-filter applies these same effects to what’s behind or under a transparent element.

Random image

Filter effects

Just like filter the backdrop-filter can take the following values. Instead of percentage values whole number can be used where 1 is equivalent to 100%, 0.5 to 50% etc.

blur(10px);
brightness(60%);
contrast(150%);
drop-shadow(3px 3px 2px #111);
grayscale(70%);
hue-rotate(120deg);
invert(70%);
opacity(50%);
sepia(90%);
saturate(150%);

An example could be:

.some-div {
    backdrop-filter: blur(5px) grayscale(0.7) invert(10%) opacity(80%);
}

The opacity filter reduces the intensity of the other filters.

View the CSS for this page

  .modal {
      position: fixed;
      top: 20vh;
      left: -70vw;
      width: 60vw;
      height: 55vh;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 2em;
      background-color: #1111;
      /* backdrop-filter: blur(10px); */
      border: solid 1px #fff3;
      border-radius: 30px;
      transition: 1s;
  }
  .modal section {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
      gap: 10px;
      /* padding: 1em 1em 1em 1em; */
  }
  .modal p {
      color: #fff;
      background-color: #111a;
      padding: 1em;
      border-radius: 3px;
  }
  .slideIn {
      transform: translateX(80vw);
  }
  button {
      font-size: 1em;
      padding: 0.25em 0.8em;
      border: none;
      border-radius: 3px;
      background-color: var(--headercolor);
      color: #fff;
  }
  button:hover {
      cursor: pointer;
  }

  .closeBtn {
      position: absolute;
      top: 10px;
      right: 10px;
      font-size: 1.2em;
      color: #fff8;
      background-color: transparent;
      transition: 0.6s;
  }
  .closeBtn:hover {
      color: #fff;
      transform: scale(1.3);
      transform-origin: center center;
  }
  .filterBtn {
      width: 100%;
      background-color: #28c;
      position: relative;
      isolation: isolate;
      overflow: hidden;
  }
  .filterBtn:focus {
      background-color: green;
  }
  .filterBtn::after {
      content: '';
      position: absolute;
      inset: 0;
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 0.5s;
      display: block;
      background-color: darkred;
      z-index: -5;
  }
  .filterBtn:hover::after {
      transform: scaleX(1);
  }

  .opacity-btn {
      display: none;
  }

  .blur {
      backdrop-filter: blur(10px);
  }

  .brightness {
      backdrop-filter: brightness(150%);
  }

  .contrast {
      backdrop-filter: contrast(150%);
  }

  .drop-shadow {
      backdrop-filter: drop-shadow(3px 3px 2px #111);
  }

  .grayscale {
      backdrop-filter: grayscale(70%);
  }

  .hue-rotate {
      backdrop-filter: hue-rotate(120deg);
  }

  .invert {
      backdrop-filter: invert(70%);
  }

  .sepia {
      backdrop-filter: sepia(90%);
  }
  .opacity {
      backdrop-filter: opacity(50%);
  }

  .saturate {
      backdrop-filter: saturate(150%);
  }