Box Shadow With HTML & CSS

 

                  

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>box shadow</title>

    <style>

        *{

            padding:0;

            margin:0;

        }

        body{

            display: flex;

            align-items: center;

            justify-content: space-around;

            width:100%;

            height:100vh;

            background-color: rgb(87, 185, 100);

        }

        .box{

            width:300px;

            height:300px;

            background-color: rgb(87, 185, 100);

            box-shadow: 5px 5px 10px rgb(51, 109, 58),

            -5px -5px 10px rgb(118, 255, 137);

        }

        .circle{

            border-radius: 50%;

        }

        .inside{

            box-shadow: inset 5px 5px 10px rgb(51, 107, 59),

             inset -5px -5px 10px rgb(118, 255, 137);

        }

    </style>

</head>

<body>

    <div class="box "></div>

    <div class="box circle"></div>

    <div class="box inside"></div>

    

</body>

</html>