Box Shadow in CSS | All About CSS Box Shadow

Hello, guys welcome to Code With Random blog, today we learn Box shadow CSS. We learn topics like Top Box Shadow, Bottom Box Shadow, Left Box Shadow, Right Box Shadow, Top Left Box Shadow, Bottom Right Box Shadow, and many more things about CSS Box Shadow.

Q. What is CSS Box Shadow?

CSS box-shadow is a Shadow design that comes from CSS. We have box Shadow for all sides or top box Shadow, bottom box Shadow, right box Shadow, left box Shadow. In this blog post, you easily learn how to create the box Shadow for any HTML element.

Top Box Shadow

If we want to give shadow to the top of the element so we just need to use box-shadow to create top shadow so we learn how to create it.

First, we write HTML for it... and we use this HTML code for every example

 <div class="box">  
     <h1>Example of Box Shadow</h1>  
 </div>  

CSS Part:

  * {  
    margin: 0;  
    padding: 0;  
   }  
   body {  
    background-color: burlywood;  
   }  
   .box {  
    position: absolute;  
    top: 50%;  
    left: 50%;  
    transform: translate(-50%, -50%);  
    padding: 2rem;  
    margin: 2rem;  
    background-color: #ffff;  
    box-shadow: 0px -14px 4px rgba(0, 0, 0, 0.5),  
     -3px -3px 4px rgba(0, 0, 0, 0.5);  
   }  

Output...

Top Box Shadow

Bottom Box Shadow

We don't need to change many properties. we just need to change the code in box class's box-shadow so let's check what is it? 

  .box {  
    position: absolute;  
    top: 50%;  
    left: 50%;  
    transform: translate(-50%, -50%);  
    padding: 2rem;  
    margin: 2rem;  
    background-color: #ffff;  
    box-shadow: 0px 15px 0px rgba(0, 0, 0, 0.5);  
   }  

Output...

Bottom Box Shadow

Left Box Shadow

 .box {  
   position: absolute;  
   top: 50%;  
   left: 50%;  
   transform: translate(-50%, -50%);  
   padding: 2rem;  
   margin: 2rem;  
   background-color: #ffff;  
   box-shadow: -13px 0px 0px rgb(0 0 0 / 50%);  
 }  

Output...

Left Box Shadow

Right Box Shadow

 .box {  
    position: absolute;  
    top: 50%;  
    left: 50%;  
    transform: translate(-50%, -50%);  
    padding: 2rem;  
    margin: 2rem;  
    background-color: #ffff;  
    box-shadow: 15px 0px 0px rgba(0, 0, 0, 0.5);  
   }  

Output...

Right Box Shadow

Top Left Box Shadow

 .box {  
    position: absolute;  
    top: 50%;  
    left: 50%;  
    transform: translate(-50%, -50%);  
    padding: 2rem;  
    margin: 2rem;  
    background-color: #ffff;  
    box-shadow: -16px -15px 0px rgba(0, 0, 0, 0.5);  
   }  

Output...

Top Left Box Shadow

Bottom Right Box Shadow

   .box {  
    position: absolute;  
    top: 50%;  
    left: 50%;  
    transform: translate(-50%, -50%);  
    padding: 2rem;  
    margin: 2rem;  
    background-color: #ffff;  
    box-shadow: 16px 15px 0px rgba(0, 0, 0, 0.5);  
   }  

Output...

Bottom Right Box Shadow

Hope you like this post and enjoy it. If we did any mistake please comment it down so this help full for also our users. Thank you for reading.

Written by Tushar Sharma

Team Codewith_Random