<!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>
Post a Comment