Reputation: 155
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
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
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