<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section class="area"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </section>

body { height: 100vh; margin: 0; display: grid; place-items: center; } div { width: 100px; height: 100px; } .area { display: grid; gap: 3rem; grid-template-columns: repeat(3, 1fr); } div:nth-child(1) { box-shadow: 0 3px 10px rgb(0 0 0 / 0.2); } div:nth-child(2) { box-shadow: 0.5rem 0.5rem black, -0.5rem -0.5rem #ccc; } div:nth-child(3) { box-shadow: 0 0 5px 5px red; } div:nth-child(4) { background: #eee; box-shadow: 0 8px 8px -4px lightblue; } div:nth-child(5) { border-radius: 50%; box-shadow: 0 0 50px #ccc; } div:nth-child(6) { box-shadow: 0 -5px 3px -3px black, 0 5px 3px -3px black; }