Box Shadow in CSS | All About CSS Box Shadow

Box Shadow in CSS | All About CSS Box Shadow

box shadow css | All About CSS Box Shadow

Hello, guys welcome to Code With Random blog, today we learn Box shadow CSSWe 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...

box shadow css | All About CSS Box Shadow
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...

box shadow css | All About CSS Box Shadow
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...

box shadow css | All About CSS Box Shadow
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...

box shadow css | All About CSS Box Shadow
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...
box shadow css | All About CSS Box Shadow
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...

box shadow css | All About CSS Box Shadow

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

Post a Comment

Previous Post Next Post