CSS Box Shadow

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 :
1 thought on “CSS Box Shadow”