CODEWITHSUNDEEP
htmlcss
Leith
Leith

Reputation: 155

Box-Shadow and drop-shadow not showing on button

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>

Upvotes: 1

Views: 1117

Answers (2)

Joman Rey
Joman Rey

Reputation: 62

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;
   
    z-index: 1;
   
     filter: drop-shadow(0px 4px 15px  rgba(0, 0, 0, 0.2));
    }
    
    
    .box-shadow{
    position: absolute;
     top: 1.5rem;
    right: 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;
    font-size:10px;
    text-align:center;
    z-index: 1;
     box-shadow: 0px 4px 15px  rgba(0, 0, 0, .2);
    }
<div class="desktop-modal-close-btn"></div>



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

Upvotes: 2

John Lao
John Lao

Reputation: 3

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.

Upvotes: 0

Related Questions