Kevin Powell - Community•2mo ago

What is the difference between backdrop-filter and filter properties in css

Hello guys, sorry to disturb you all, can someone explain what is the difference between backdrop-filter and filter properties in css please For eg, consider the following code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles/menu.css" />
    <title>Menu</title>
  </head>
  <body>
    <div class="container">
      <li class="game"><a href="">Play Game</a></li>
      <li><a href="">Leaderboard</a></li>
      <li><a href="">Rules</a></li>
    </div>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles/menu.css" />
    <title>Menu</title>
  </head>
  <body>
    <div class="container">
      <li class="game"><a href="">Play Game</a></li>
      <li><a href="">Leaderboard</a></li>
      <li><a href="">Rules</a></li>
    </div>
  </body>
</html>

body {
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    place-items: center;
    background-image: url("../../assets/images/sunnyland.png");
    background-size: cover;
    background-position: center;
    font-family: 'Poppins', sans-serif;
    color: #fff;
}

/* Container for the Menu */
.container {
    position: relative;
    top: 30px;
    height: 300px;
    width: 300px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37);
    /* backdrop-filter: blur(10px); */
    /* -webkit-backdrop-filter: blur(10px); */
    border: 2px solid rgba(255, 255, 255, 0.18);
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    outline: 2px solid yellow;
}

body {
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    place-items: center;
    background-image: url("../../assets/images/sunnyland.png");
    background-size: cover;
    background-position: center;
    font-family: 'Poppins', sans-serif;
    color: #fff;
}

/* Container for the Menu */
.container {
    position: relative;
    top: 30px;
    height: 300px;
    width: 300px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37);
    /* backdrop-filter: blur(10px); */
    /* -webkit-backdrop-filter: blur(10px); */
    border: 2px solid rgba(255, 255, 255, 0.18);
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    outline: 2px solid yellow;
}

What I wanted is to blur the background image and keep my container intact but when I try to use filter on the background image, found in body, it is the contain who gots blurred. Now if I use backdrop-filter, what this does, this basically blurrs whatever is found behind the element being targetted that is a small portion of the background image

9 Replies

ἔρως•2mo ago

backdrop-filter only applies to the background filter applies to the entire element

FakerOP•2mo ago

ah, backdrop filter, filters part of the background that this particular element takes while filter applies to both background and content of element ?

ἔρως•2mo ago

yes, that's it and it's not "part of the background" - it filters the background

FakerOP•2mo ago

hmm it filters the entire background or only part of the background behind that particular element ?

ἔρως•2mo ago

the entire background of the element

Rowe2ry•2mo ago

Vsually its easiest with blur for me https://codepen.io/Chris-Rowe/pen/RwXLLrm

FakerOP•2mo ago

yep I see , ty so backdrop-filter, it doesn not filter all background image but only the portion behind our container being targeted, right ?

Rowe2ry•2mo ago

yeah box 1 (filter), the whole box is blurry including its edges box 2 (backdrop-filter) text is not blurry, edges of div are not blurry, but the stuff behind it looks blurred (great for "glass" style UI implmentations) Box 3 is a control and the backdrop fill for all of these is a transparent red

FakerOP•2mo ago

yep I see, ty !!

Gaming

Programming

What is the difference between backdrop-filter and filter properties in css