Box-Shadow and drop-shadow not showing on button-CodePudding

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 >
</button>

CodePudding user response：

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 ></div>

CodePudding user response：

The rgba() function define colors using the Red-green-blue-alpha (RGBA) model.

RGBA color values are an extension of RGB color values with an alpha channel - which is the OPACITY of the color.

Since your alpha channel value is 0.2, it seems the shadow cannot be visualize enough.