What is Box-Shadow?Box Shadow css? All at one place

What is Box-Shadow?Box Shadow css? All at one place

What is Box-Shadow?Box Shadow css? All at one place


What is the Box-Shadow in CSS ? This is a question asked by many developers who are new to web developement they heard this term frequently means this property plays a important role while styling in css . 

By the end of this blog after reading, you can answer the question that what is Box-shadow property in CSS and How to implement it and also the measures taken while applying this property ? We will learn it through examples and codes so that it will be easy to visualize.Let's get started---

 

Hey Learners, 

Box-Shadow is a styling property which gives shadow to container. 

 

  • box-shadow: none;

    It is a default value .so if you apply it or not it is always applied.no effect of adding it.the styling before and after will be same. 

 

 <!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>Document</title>  
   <style>  
     body{  
       display: flex;  
       justify-content: center;  
       align-items: center;  
 width:100vw;  
 height: 100vh;  
     }  
     .btn{  
       padding:20px;  
       color:black;  
       background-color: aqua;  
       border-radius: 5px;
box-shadow:none; }  
   </style>  
 </head>  
 <body>  
   <div class="btn">Click</div>  
 </body>  
 </html>  

 

  •  box-shadow:horizontal-offset vertical-offset blur spread color .



    1. horizontal-offset:-


      Required. The horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box.              
            
       


     

    2.vertical-offset:-


    Required. The vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box. 
     


    3.blur:-

    Optional. The blur radius. The higher the number, the more blurred the shadow will be
     

    4.spread:-


    Optional. The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow    

     5.Color:-


    Optional. The color of the shadow. The default value is the text color.You can give color in any format like rgb,hex code ,rgba ,hsl or hsla.

     For Example purpose I have inserted a live server of codepen you can click on it and check the code and how I used different methods for box-shadow.






See the Pen Untitled by Himanshu Singh (@himanishu) on CodePen.

Code for the above live server is below:-
 <!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>Document</title>  
   <style>  
     body{  
       display: flex;  
       justify-content: center;  
       align-items: center;  
 width:100vw;  
 height: 100vh;  
     }  
     .btn{  
       padding:20px;  
       color:black;  
       background-color: aqua;  
       border-radius: 5px;  
      margin:20px;  
     }  
    .btn0{  
      box-shadow:10px 10px;  
    }  
    .btn1{  
     box-shadow:10px 10px 5px;  
    }  
    .btn2{  
     box-shadow:10px 10px 5px 5px;  
    }  
    .btn3{  
     box-shadow:10px 10px 5px 5px rgb(255,0,0);  
    }  
    .btn4{  
     box-shadow:10px 10px 10px 5px rgba(0,0,0,0.5);  
    }  
   </style>  
 </head>  
 <body>  
   <div class="btn btn0">Click</div>  
  <div class="btn btn1">Click</div>  
  <div class="btn btn2">Click</div>  
  <div class="btn btn3">Click</div>  
  <div class="btn btn4">Click</div>  
 </body>  
 </html>  

  •  box-shadow:horizontal-offset vertical-offset blur spread color inset.

    #Inset is used when you want to give an shadow but not outside it should be inside.#

    I have inserted a live server for the same below:-

    See the Pen Untitled by Himanshu Singh (@himanishu) on CodePen.

    Code for the same below:-

     <!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>Document</title>  
       <style>  
         body{  
           display: flex;  
           justify-content: center;  
           align-items: center;  
     width:100vw;  
     height: 100vh;  
         }  
         .btn{  
           padding:20px;  
           color:black;  
           background-color: aqua;  
           border-radius: 5px;  
          margin:20px;  
         }  
        .btn0{  
          box-shadow:10px 10px inset;  
        }  
        .btn1{  
         box-shadow:10px 10px 5px inset;  
        }  
        .btn2{  
         box-shadow:10px 10px 5px 5px inset;  
        }  
        .btn3{  
         box-shadow:10px 10px 5px 5px rgb(255,0,0) inset;  
        }  
        .btn4{  
         box-shadow:10px 10px 10px 5px rgba(0,0,0,0.5) inset;  
        }  
       </style>  
     </head>  
     <body>  
       <div class="btn btn0">Click</div>  
      <div class="btn btn1">Click</div>  
      <div class="btn btn2">Click</div>  
      <div class="btn btn3">Click</div>  
      <div class="btn btn4">Click</div>  
     </body>  
     </html>  
    

     

For Multiple shadow for a container you have to use comma as a separator between two shadow properties.


 

See the Pen Untitled by Himanshu Singh (@himanishu) on CodePen.

 

Code :-

 <!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>Document</title>  
   <style>  
     body{  
       display: flex;  
       justify-content: center;  
       align-items: center;  
 width:100vw;  
 height: 100vh;  
     }  
     .btn{  
       padding:20px;  
       color:black;  
       background-color: aqua;  
       border-radius: 5px;  
      margin:20px;  
     }  
    .btn0{  
      box-shadow:10px 10px inset,10px 10px 5px 5px;  
    }  
    .btn1{  
     box-shadow:10px 10px 5px inset, -5px -5px 5px 5px red inset;  
    }  
    .btn2{  
     box-shadow:10px 10px 5px 5px,-5px -5px 5px 5px green;  
    }  
    .btn3{  
     box-shadow:10px 10px 5px 5px rgb(255,0,0),20px 20px yellow;  
    }  
    .btn4{  
     box-shadow:10px 10px 10px 5px rgba(0,0,0,0.5) inset,-5px -10px inset;  
    }  
   </style>  
 </head>  
 <body>  
   <div class="btn btn0">Click</div>  
  <div class="btn btn1">Click</div>  
  <div class="btn btn2">Click</div>  
  <div class="btn btn3">Click</div>  
  <div class="btn btn4">Click</div>  
 </body>  
 </html>  

  

I hope hoped loved this blog and learnt many things at a place please let us know your review in the comment section if you liked it please comment below as it will give us motivation to create more blogs.

If you faced any difficulty feel free to comment down your problems and If you really liked it, please show your love in the comment section this really motivates a blogger to provide more such content.

You can follow me on Instagram.

Written by @Himanshu Singh.

Post a Comment

Previous Post Next Post