Why the filter and box-shadow not working on the button? Why is the problem occurring, how can I solve it?
.desktop-modal-close-btn {
position: absolute;
top: 1.5rem;
right: 1.5rem;
height: 2.8rem;
width: 2.8rem;
padding: 0px;
background: rgba(0, 0, 0, 0.3);
border-radius: 100%;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
border: none;
filter: drop-shadow(0px 4px 15px rgba(0, 0, 0, 0.2));
z-index: 1;
}<button class="desktop-modal-close-btn">
</button>>Solution :
its working its just that the shadow opacity is too low thats why it looks like its not working
I modified the opacity for dropshadow
filter: drop-shadow(0px 4px 15px rgba(0, 0, 0, 100));
.desktop-modal-close-btn {
position: absolute;
top: 1.5rem;
right: 1.5rem;
height: 2.8rem;
width: 2.8rem;
padding: 0px;
background: rgba(0, 0, 0, 0.3);
border-radius: 100%;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
border: none;
filter: drop-shadow(0px 4px 15px rgba(0, 0, 0, 100));
z-index: 1;
}<div class="desktop-modal-close-btn"></div>