How can I make neumorphism-style element shadows using CSS? - css

Question

I'm trying to recreate Alexander Plyuto's modern skeumorphic style (now called neumorphism) in CSS:
I'm attempting to do this by having a colored shadow on the top and left, and a differently colored shadow on the bottom and right.
I researched MDN for box-shadow and I can see box-shadow supports multiple values, but rather than being top-right-bottom-left like the rest of CSS, multiple values are actually full-size shadows for all sides that are stacked on top of each other:
The z-ordering of multiple box shadows is the same as multiple text shadows (the first specified shadow is on top).
Is it possible to create this effect in CSS?
Note that 'no' is an acceptable answer, but creating additional HTML (ie, not using CSS) is not. Buttons in HTML are normally represented by <button>A button</button>

Answer 1

As I suggested in the comments before this was re-opened, my suggestion is to use pseudo-elements to achieve the double shadow effect. You could probably achieve this with just one, but here's my quick-and-dirty exaple I've whipped up to show it off:
body {
background: #424242;
}
.button {
box-sizing: border-box;
display: flex; /* Just to center vertically */
align-items: center;
justify-content: center;
width: 160px;
height: 55px;
border-radius: 1em;
text-align: center;
font-family: sans-serif;
font-weight: 600;
color: #2b2a2e;
text-decoration: none;
background: linear-gradient(48deg, #c4ccd1, #e1e5e8);
position: relative;
z-index: initial;
}
.button::before, .button::after {
content: "";
display: block;
position: absolute;
width: 160px;
height: 35px;
background: transparent;
border-radius: 1em;
z-index: -1;
opacity: 0.65;
}
.button::before {
top: -1px;
left: -1px;
background-color: #fff;
box-shadow: 0 0 10px 5px #fff;
}
.button::after {
bottom: -1px;
right: -1px;
background-color: #b6c7e7;
box-shadow: 0 0 10px 5px #b6c7e7;
}
Request

Answer 2

I got a very close answer to your question. Here is the
https://jsfiddle.net/nuakbqe7/1/
<div class="button">
<p>Request</p>
</div>
Here is the css:
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#500&display=swap");
* {
font-family: "Poppins", sans-serif;
transition: 0.5s;
}
body {
background: #e1ebf5;
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s;
min-height: 97vh;
}
.button {
border-radius: 17px;
cursor: pointer;
background: #e1ebf5;
box-shadow: 6px 6px 11px #d2dce6, -6px -6px 11px #edf2f7;
width: 300px;
text-align: center;
}
p {
font-size: 18px;
color: #202c3d;
text-shadow: 2px 2px 2px #c3cfde;
}

Answer 3

This question was originally closed by a moderator in error. During the time the question was closed, and answers were not allowed, multiple users have contacted me with solutions. As the question has now been reopened, I'm posting their solutions, with credit to them, as as community wiki so I don't get karma.
In short: CSS itself doesn't provide a way to directly set different shadow colors on different sides. However there are ways to achieve a neumorphic look - see below:
neumorphism.io CSS generator
There is now an online Neumorphism CSS generator at https://neumorphism.io/
#noomorph's answer (provided as a comment when answers were closed)
Use two shadows (as mentioned), but with the offsets arranged so that one covers the top and left, the other covers bottom and right.
As commenters have noted the gradients can overlap. It's likely not
possible to copy the demo, as the demo has a wide spread radius but no
overlap, which cannot be achieved in CSS as the shadows stack on top
of each other.
body {
background: lightgrey;
}
button {
border: none;
background-color: #efefef;
color: black;
font-size: 24px;
text-transform: uppercase;
padding: 20px;
margin: 50px;
position: relative;
border-radius: 10px;
box-shadow: -2px -2px 8px 4px white, 2px 2px 8px 4px #222;
}
<button>This is a button</button>
#disinfor's answer (provided on chat when answers were closed)
Use a pseudo element, that has a gradient background, and is itself blurred. It's likely not possible to copy the demo here either, as the higher amount of darkness in the start of the gradient means that the blurry shadow isn't uniform:
body {
background: lightgrey;
}
button {
border: none;
background-color: white;
color: black;
font-size: 24px;
text-transform: uppercase;
padding: 20px;
margin: 50px;
position: relative;
border-radius: 5px;
}
button::after {
content: '';
z-index: -1;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: blue;
background: linear-gradient(350deg, rgba(10,10,10,0.8) 0%, rgba(255,255,255,0.8) 100%);
filter: blur(10px);
}
<button>This is a button</button>