Button not displaying box-shadow or drop-shadow effects

Why isn't the filter and box-shadow working on the button? What could be causing this issue and how can it be resolved?

.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>

htmlcss

Answer №1

Everything is functioning properly, but the issue lies in the shadow opacity being too low which gives the impression that it's not working.

I have adjusted the opacity for the drop shadow effect.

.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>

Answer №2

The rgba() function allows for the creation of colors using the Red-green-blue-alpha (RGBA) model.

Adding an alpha channel to RGB color values creates RGBA color values, which determine the opacity of the color.

If the alpha channel has a value of 0.2, it may result in the shadow not being visible enough.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

In order to properly adjust the HTML content when resizing the window, it

I'm facing an issue with a toggle setup for displaying content differently based on screen width. Specifically, when the screen size decreases below 600px, it switches to the correct content. However, upon increasing the screen width again, it fails t ...

htmljquery

Altering data in a concealed dynamic HTML form

I have a hidden form on my webpage that gets populated dynamically when a button is clicked. I want to be able to change the values within this form dynamically. Initially, the form looks like this: <form id="zakeke-addtocart" method="pos ...

htmljqueryajax

Tips for applying a class to two elements when a checkbox is clicked and avoiding duplicated URL strings

Issue with Checkbox Selection In my project, I have implemented two tabbed containers for grid and list view. Each container contains multiple elements called info boxes with checkbox inputs. Whenever a checkbox is checked, the background color of the res ...

jqueryhtmlcss

The debate over website background images: balancing size and speed

Has anyone experimented with background images and their impact on web design? Typically, backgrounds are designed to repeat in either the x or y direction, or both. For example Consider a gradient background that repeats horizontally. If the gradient i ...

htmlrenderingbackground-image

Showcasing particular id or class within a different id upon clicking a link

These are the links I have available: <a href="#home">Home</a> <a href="#about">About</a> <a href="#portofolio">Portfolio</a> <a href="#contact">Contact</a> I would like the user to click on any of these l ...

jqueryhtml

Enhance your AngularJS skills by incorporating multiple conditions into the ternary operations of ng-class

I am struggling to apply multiple classes when the condition in the ng-class attribute evaluates to true. Here is the code I have attempted so far, but it doesn't seem to be working: <div class="col-md-4" ng-mouseover="hoverButton=true" id="plai ...

javascriptcssangularjsternary-operatorng-class

Limit the ability to zoom in a webview application

I am facing an issue with my Android WebView app that is designed to load a specific URL and display it along with its links within the app. Despite setting the webpage size to 720px x 1280px using CSS to fit the screen of a Galaxy S3, I am encountering di ...

androidcssandroid-webview

Converting XML hierarchy into a flat HTML table using XSLT

Looking for a way to transform hierarchical XML into an HTML table? Here's the challenge: <node text="a" value="1"> <node text="gga" value="5"> <node text="dh" value="9"> <node text="tyfg" value="4"> < ...

htmlxmlxslt

When I separate the div into its own line in the HTML/CSS code, the behavior changes significantly

I'm encountering an issue with my HTML/CSS structure: .im-wrapper { width: 100%; height: 100%; position: fixed; overflow: hidden auto; top: 0; left: 0; } .im-backdrop { background-color: var(--darkblack); opacity: 80%; width: 1 ...

htmlcssbootstrap-5

Tips for aligning text and image in the center of a div with a specific width:

I'm having a hard time figuring this out for some reason. I need to center both text and an image on the same line within a div that has a 100% width. Check out this jsfiddle link for reference: http://jsfiddle.net/JnbeJ/ ...

htmlcsscentering

Why is the lower right white space left unfilled by the color red?

I'm having issues with using named lines in grid for layout. The red section is not positioning correctly next to the footer, and I can't figure out where I went wrong. * { box-sizing: border-box; margin: 0; padding: 0; } .container { ...

htmlcsslayoutfrontendgrid

Having trouble activating my Nav Toggle button on Bootstrap 4

My navbar toggle button isn't working and I'm not sure why. Could it be that I'm missing a class? Any help would be greatly appreciated as I've tried to find a solution on my own without success. Thanks <head> <meta charse ...

htmlbootstrap-4

Designing a table with specific limitations on the width of each column

Having an issue with an HTML table that has 3 columns and specific restrictions: Column 1: fixed width, no text wrapping (small text) Column 2: allows text wrapping Column 3: contains descriptive long text with wrapping enabled A row should span the enti ...

htmlcsshtml-table

Targeting the landscape mode on screens of both iPhone 4 and iPhone 5 sizes using CSS3 Media Queries

I'm facing a problem with CSS3 media queries while developing a mobile site. The code I've written works perfectly on the landscape mode of an iPhone 5, but it's not quite right on an iPhone 4 or earlier in landscape mode. /* Default stylin ...

htmlcssmedia-queries

What is the best way to create a hover effect exclusively for the hamburger icon, and not for the close button

I am facing an issue with the code snippet below: .btn-menu:hover .btn-menu__bars::before{ transform: translateY(-0.5875rem); } .btn-menu:hover .btn-menu__bars::after{ transform: translateY(0.5875rem); } Is there a way to make this hover effect only a ...

htmlcss

find div elements containing a specific classname

I'm seeking assistance in filtering a large number of populated divs with dynamically generated class names. Here is a form that, when an option is selected, should hide all divs that do not contain the selected class name. <p>To refine your s ...

javascriptjqueryhtmlfilter

Improper CSS styling leading to incorrect image size

I've got this awesome parallax image on my website (the majestic nature one) Here's how the page looks normally But sadly, it's not properly sized. When I check in Chrome dev tools, it appears like the image below, which is how I want it to ...

htmlcssimage

I am seeking for the HTML table to display the outcome depicted in the image

My goal is to achieve the design shown in the image below with my code, but unfortunately it's not giving me the desired result. <form> <table> <tr> <td><label for="Uname">User Name:&l ...

html

Using JQuery to iterate through every unique div id in the HTML document

i am attempting to utilize jquery to iterate through each div tag that has an id of "rate". The goal is for jquery to execute a function on the individual divs. Here is my code snippet: information.html <html> <input class="rate" type="hidden ...

javascriptphpjqueryhtmlcss

align the horizontal navigation bar

I am facing an issue with my horizontal navigation bar. I want to include a search bar within the navigation bar, but it is causing misalignment. Here is the link to the code: https://jsfiddle.net/r6ntxg2f/ If you look at the menu, you will notice that i ...

css