CODEWITHSUNDEEP
htmlcssbackdrop
Mohit Rakh
Mohit Rakh

Reputation: 25

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

Upvotes: -2

Views: 93

Answers (2)

Ondra Michal
Ondra Michal

Reputation: 39

You have "className"

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

Should be "class":

 <div class="infoCard">
  </div>

Upvotes: 0

depperm
depperm

Reputation: 10746

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>

Upvotes: 0

Related Questions