ホバーされたら背景をグレーにしたい

HTML

<div class="box">
</div>

CSS

.box {
  width: 100px;
  height: 100px;
  border: solid 1px;
}

.box:hover {
    transition: backdrop-filter 0.5s;
    backdrop-filter: brightness(75%);
    cursor: pointer;
}