Why is my glassmorphism not working?

Question

Why isn't it blurring the background
https://code.sololearn.com/WmZ5RN9D8Gkr/?ref=app

Answer 1

I am not sure if I understand the issue correctly but I noticed that you have the backdrop-blur only on #calculator. Do you want the circles to be completely blurred? Maybe you need some blur effects in them?

Answer 2

try background-color:transparent; for your button css

button {
position: absolute;
width: 70px; height: 70px;
font-family: Baloo; font-size: 1.3em;
background-color: transparent; border: 2px solid hsl(0,0%,50%); border-radius: 15%;
margin-top: 15px;
filter: blur(0px);
}