CSS BOX SHADOW

In this tutorial we are going to learn how to give shadow to our box. ( Box can be a DIV or SPAN )

If you are looking for text shadow we wrote tutorial here : Text Shadow in CSS

So lets start our Box shadow Tutorial.

div {
  width: 400px;
  height: 150px;
  padding: 20px;
  background-color: #b9b357;
  box-shadow: 10px 10px 0px #000;
}

Lets understand it by breaking the css elements.

width : 400px; — this means the div we are using is of 300 pixel in width

height : 150px; — this means the div we are using is of 150 pixel in height

padding: 20px; — this means the div is having padding of 20px ( padding is the cover above the content inside div )

background-color: #b9b357; — background color of div

box-shadow: 10px 10px 0px #000;  — this is shadow in X axis and Y axis and Z axis and with shadow color of #000

• 10 px in x-axis , 10px in y-axis and 0px in z-axis so the shadow border will remain sharp if we want to make blurry effect in shadow then increase value in z-axis

so with the above css code our code output will looks like this

When we increase Z-AXIS value then same code will look like this

div { 
width: 400px; 
height: 150px; 
padding: 20px; 
background-color: #b9b357; 
box-shadow: 10px 10px 10px #000; 
}

 

CSS MULTIPLE BOX SHADOW

Now lets test multiplex box shadow here is the code for multiple box shadows.

div {
  box-shadow: 5px 5px blue, 15px 15px red, 25px 25px green;
  padding:20px;
  width:400px;
  height:150px;
  background-color:#b9b357;
}

Result :