Home

Awesome

Learning Neumorphism

Read: https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf3a6?gi=cae659cffc7f

See a @CAWeissen's demo: https://codepen.io/CAWeissen/pen/dyPWqLE :

<img height="200" alt="Neumorphic Design example" src="Neumorphic_Design_example.png">

Simplified code:

<div>Div</div>
<br/>
<button>Button</button>
body {
    background: hsl(215, 50%, 88);
    padding: 10%;
}

div,
button {
    background: hsl(215, 50%, 90);
    border: 3px solid transparent;
    box-shadow:
        3px 3px 6px 3px rgba(0, 0, 0, 0.1),
        -3px -3px 3px 3px rgba(247, 251, 255, 0.5),
        3px 3px 8px 2px rgba(0, 0, 0, 0) inset,
        -3px -3px 7px 2px rgba(247, 251, 255, 0) inset;
    border: none;
    border-radius: 5px;
    padding: 5px;
}