13 replies

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

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 is the difference between backdrop-filter and filter properties in css

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

Similar Threads

Similar Threads

Similar Threads