Neumorphism keyboard (CSS)



Neumorphism keyboard (CSS)




 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Box shadow</title>        
</head>
<body>
    <div class="container">
        <div class="neu">
            <div>A</div>
            <div>B</div>
            <div>C</div>
        </div>
    </div>
</body>
</html>                    
                  
                



 body {
            margin: 0;
            padding: 0;
        }

        .container {
            position: relative;
            height: 100vh;
            width: 100%;
            background-color: #dddde2;
        }

        .neu {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
        }

        .neu div {
            width: 200px;
            height: 200px;
            margin: 30px;
            display: flex;
            border: outset 5px #e7e7ee;
            border-radius: 50px;
            justify-content: center;
            align-items: center;
            font-size: 60px;
            box-shadow: 5px 5px 5px #6b6b6e, -5px -5px 5px #c1c1c5;
            background-image: linear-gradient(45deg, #F8F8FF, #d8d8dd);
        }