Search code examples
htmlcssbackdrop

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

Solution

  • You have "className"

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

    Should be "class":

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