Kevin Powell - Community•3mo ago

Two different shadow effect

#front-end How can I make this kind of shadow effect (like picture below)? I've tried this code but didn't get expected result. Here is the codepen link: https://codepen.io/kabirsumn/pen/NWZWzYa here is the CSS code I aplied on the element:

button {
    width: 90px;
    border: none;
    padding: 10px;
    border-radius: 15px;
    background-color: #202020;
    color: #d1d5db;
    cursor: pointer;
    box-shadow: 0 3px 3px rgba(19, 19, 19, 0.5), 0 0 3px rgba(209, 213, 219, 0.5);
}

button {
    width: 90px;
    border: none;
    padding: 10px;
    border-radius: 15px;
    background-color: #202020;
    color: #d1d5db;
    cursor: pointer;
    box-shadow: 0 3px 3px rgba(19, 19, 19, 0.5), 0 0 3px rgba(209, 213, 219, 0.5);
}

Can anyone please help?

kabirsumn

CodePen

two different shadow effect

...

5 Replies

kabir•3mo ago

:think:

Jochem•3mo ago

The first two px values are offsets, so probably:

    box-shadow: 3px 3px 3px rgba(19, 19, 19, 0.5), -3px -3px 3px rgba(209, 213, 219, 0.5);

    box-shadow: 3px 3px 3px rgba(19, 19, 19, 0.5), -3px -3px 3px rgba(209, 213, 219, 0.5);

capt_uhu•3mo ago

for the controller circles you'll need the inset keyword

clevermissfox•3mo ago

Look into the keyword neumorphism ; there are tons of tutorials and instructions and articles

kabir•3mo ago

it gives me better result but not like the picture. I wanted my button would look like button on the picture, specially the login button on the picture Thank you so much

Gaming

Programming

Two different shadow effect