Hello, I'm having trouble creating a frosted glass effect on my card. The blur filter isn't working and the background is not blurring no matter what I try. I have built the card using Bootstrap. Any ideas on what might be causing the issue?
.card {
margin: auto;
overflow: hidden;
position: relative;
border-radius: 12px;
width: 100%;
height: 100%;
background-color: inherit;
}
.card::before{
content: "";
background-color: inherit;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-shadow: inset 0 0 1000px rgba(0,0,0,.05);
filter: blur(40px) !important;
z-index: -1;
}