Question 236878 in Html Question posted in
Some basic documentation can be found here.

Html – why backdrop filter in css is not working?

.infoCard {
  /* From https://css.glass */
  /* background: rgba(255, 255, 255, 0.15); */
  background: rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}
  <div className="infoCard">
      </div>

this code is not working please help. i am trying to achieve glass effect like this

enter image description here

Tags:

2

Answers


  1. 0

    If you add some sizing/positioning css to infoCard (position, width, height, top, left) and add a background image, it seems to blur. I also changed the blur amount to just 5px

    Also className should be class

    body{
  background: url("https://mcdn.wallpapersafari.com/medium/58/5/oOeJGy.png");
}
.infoCard {
  /* From https://css.glass */
  /* background: rgba(255, 255, 255, 0.15); */
  background: rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);

  position: absolute;
  width: 400px;
  height: 200px;
  top: 100px;
  left: 100px;
}
    <div class="infoCard">
</div>
    Login or Signup to reply.
  2. 0

    You have "className"

    <div className="infoCard">
      </div>

    Should be "class":

     <div class="infoCard">
  </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search