CSS Drop Shadow effect is failing to render properly

I tried creating a button with a neumorphism drop shadow effect, but it's not working as expected. The button just appears as a solid two-toned button. I'm wondering if I'm using the CSS incorrectly. Could my drop shadow values be wrong in relation to the size of the button? Changing the width and height hasn't made a difference.

.css-test {
  background: #EAF0F8;
  mix-blend-mode: normal;
  border: 0.5px solid #FFFFFF;
  box-shadow: 0px -30px 60px rgba(167, 179, 190, 0.35), 0px 30px 60px rgba(167, 179, 190, 0.35);
  border-radius: 35px;
}

.buysellbutton {
    width: 44px;
    height: 44px;
    background: #F0F0F3;
    box-shadow: -10px -10px 30px 40% #FFFFFF, 10px 10px 30px rgba(174, 174, 192, 0.4);
    border-radius: 16px;
  }
<div class="css-test">
   <h3> Cash Flow: <span>CSS TEST</span></h3>
   <button class="buysellbutton">buy</button>
</div>

htmlcss

Answer №1

To eliminate the black border from a button, simply add "border-style:none" to the button's CSS. I also included an additional button with hover and active styling.

If you're interested in creating a Neumorphism effect, you can visit this website.

.css-test {
  background: #EAF0F8;
  mix-blend-mode: normal;
  border: 0.5px solid #FFFFFF;
  box-shadow: 0px -30px 60px rgba(167, 179, 190, 0.35), 0px 30px 60px rgba(167, 179, 190, 0.35);
  border-radius: 15px;
  padding: 10px;
}

.buysellbutton {
    width: 80px;
    height: 44px;   
    border-style:none;         
    border-radius: 16px;
    background: #F0F0F3;
    box-shadow:  18px 18px 36px #c5c5c7, 
             -18px -18px 36px #ffffff;
    outline:none;
         
  }
  
  
  .button {
    width: 150px;
    height: 50px;
    background: #f3f0f1;
    position: relative;
    background: #f3f0f1;
    margin-bottom: 25px;
    border-radius: 32px;
    text-align: center;
    cursor: pointer;
    transition: all 0.1s ease-in-out;
    outline: none;
    border-style: none;
    box-shadow: -6px -6px 10px rgba(255, 255, 255, 0.8),
        6px 6px 10px rgba(0, 0, 0, 0.2);
    color: #6f6cde;
    }
    span {
      font-size: 25px;
      font-weight: semibold;
    }
      .button:hover {
        opacity: 0.7;
        box-shadow: -6px -6px 10px rgba(255, 255, 255, 0.8),
          6px 6px 10px rgba(0, 0, 0, 0.2);
      }
      .button:active {
        opacity: 1;
        box-shadow: inset -4px -4px 8px rgba(255, 255, 255, 0.5),
          inset 8px 8px 16px rgba(0, 0, 0, 0.1);
        color: #79e3b6;
      }
<div class="css-test">
   <h3> Cash Flow: <span>CSS TEST</span></h3>
   <button class="buysellbutton">buy</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
   <button class="button"><span>Buy</span></button>
</div>

Answer №2

To begin, add the following snippet of code at the start of your CSS file:

button{
   all: unset;
}

Instead of using

box-shadow: -10px -10px 30px 40% #FFFFFF, 10px 10px 30px rgba(174, 174, 192, 0.4);

opt for

box-shadow: -10px -10px 30px 40px #FFFFFF, 10px 10px 30px rgba(174, 174, 192, 0.4);

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

Unable to find '/images/img-2.jpg' in the directory 'E:React eact-demosrc'

My code is giving me trouble when trying to add an image background-image: url('/images/img-2.jpg'); An error occurred during compilation. ./src/App.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src?? ...

javascripthtmlcssreactjs

What are the steps to effectively incorporate Bootstrap into a React project?

I have recently put together a basic webpage with a header and footer. Utilizing Bootstrap for the header components, I have encountered an issue where Bootstrap does not seem to be functioning as expected. Here's a snippet from App.js: import R ...

javascripthtmlreactjsbootstrap-5

Customize the website's CSS for optimal viewing on an iPad

I have a website with two CSS files: one for viewing the site on a desktop screen and the other for viewing it on an iPad screen. Despite having the same HTML code, is there a way to detect the iPad device and force it to use the appropriate CSS file? Tha ...

asp.nethtmlcssipadweb

Ways to display two horizontal scrolling menu bars

I am in need of displaying two horizontal scroll menu bars on my website. After some research, I came across a custom horizontal scroll menu with left and right arrows. https://jsfiddle.net/c5grnve6/ While it works well with only one scroll menu on the p ...

javascriptjqueryhtml

What is the best way to display SQL data arranged in sets of 6 rows each?

Currently, I am facing an issue where the SQL data that is retrieved through PHP is being displayed in a single vertical column. I am looking to modify this layout so that the data is shown in rows of 6 items each. After displaying 6 items in one row, a n ...

phphtmlsqldisplay

Enhance user experience by enabling clickable links in Angular comment sections

Currently, I'm developing an application that allows users to add comments to specific fields. These comments may contain links that need to be clickable. Instead of manually copying and pasting the links into a new tab, I want the ability to simply c ...

htmlangulartypescript

``Are there any thoughts on how to troubleshoot display problems specifically on mobile

Whenever I use Safari on iOS for my web application, I encounter strange rendering issues. It's odd because the majority of the time everything functions as it should, but every now and then these bugs crop up with no discernible pattern. Examples th ...

cssvue.jssafarimobile-safari

Creating interactive JavaScript elements that can be moved around within a container

I recently faced a challenge while attempting to make draggable elements within a div. The issue arose when I realized that I couldn't figure out how to drag each element individually without affecting the others. My current code only allows for handl ...

javascripthtmljquerydrag-and-dropdraggable

Develop a JavaScript function to create a DIV element and retrieve the text content using a JavaScript constant

Seeking assistance with creating a JavaScript function to add a dynamic DIV with specific configuration. Current setup: <div class="tooltip" > <font class="textStyleInfo"><b>( ...

javascripthtml

Half of the sections will not stack on mobile devices

UPDATE I found and fixed a typo in the code, making adjustments to both the JSFiddle and this post to show the correction. The Headline is supposed to take up 100% height but currently isn't. Still seeking feedback on this issue. Everything looks per ...

htmlcsslayoutheightresponsive

Close button located in the upper-right corner is partially cut off

My challenge involves placing a close button on the top right corner of a #main div that contains an image of varying or larger size. I need the close button to slightly protrude outside the div using negative margins. The issue is that when I use overflow ...

htmlcss

What are some other options besides HTML Tidy?

Having integrated HTML Tidy into my application to sanitize incoming HTML, I have encountered a plethora of bugs within the Tidy source code. The task of fixing these bugs directly in the source is nothing short of a nightmare, given that the code is an in ...

c++htmlctidyhtmltidy

Apply the Class to each alternate element starting from the first one

I have a task to assign specific classes to every other element in a list, starting from the first one. Check out the list below: <ul class="timeline"> <span class="topbullet"></span> <li></li> <li></li> ...

javascriptjquerycsshtml

Implement a background image in the navigation bar links using CSS

Strange as it may seem, the image refuses to show up in the navbar. Adding borders or other styling makes it visible, but not the image itself. If I manually include the image using the <img/> tag in the HTML, it appears, but then the hover effect do ...

htmlimagecss

Is there a way to verify if JQuery libraries (and other files containing custom code) have been properly included?

So I've got this JavaScript file with some code that relies on JQuery libraries. How can I make sure that both the file and the libraries are properly included? (I hope this question isn't too silly.) ...

javascripthtmljqueryframeworks

What is the best way to organize the height property in this particular scenario?

Struggling with adjusting the height attribute for the content within a modal window. Desire for the content in the modal window to occupy 100% of the space, but unfortunately only reaching around 30%. Curious as to why this limitation exists and seeking ...

htmlcssheight

Looking to update the page title on a WordPress website

I would like to update the title of a page that has been created using a category link. Specifically, I need to change the page title to "News." Although I have explored customization options, I am unable to directly modify the text. Thus, I am looking f ...

htmlcsswordpresscss-selectorscoding-style

What steps should I take to troubleshoot this file uploading error on my Mac?

Caution: The file upload for "Kol auto.png" failed to open due to permission issues at line 56 in /Applications/XAMPP/xamppfiles/htdocs/selfsub/one.php Error: Unable to move '/Applications/XAMPP/xamppfiles/temp/phpa6Q0J9' to 'upload/Kol aut ...

javascriptphphtmlformserror-handling

Alpha Screen and Shading Filter

Having trouble with CSS filters in IE8. I have a div with a gradient background that needs to have opacity set to 0, and when hovered over, the opacity should change to 1. Here's my code: #myDiv { filter: alpha(opacity=0); opacity: 0; background:rgba ...

cssinternet-explorer-8gradientalpha

Traversing snapshots

My current setup involves using fancyBox, where images are wrapped in <a> tags to allow for enlargement upon clicking. However, I am facing an issue where users can navigate not only within the same panel but also between panels. Ideally, I want to l ...

jqueryhtmlimagefancyboxfancybox-2