In this tutorial, we are going to create box shadow effects only with CSS. Below is an image created by photoshop of different box shadows effects. These uses are the only way of creating this effect but thanks to CSS3 we can now do all this with just CSS.
CSS Box Shadow
We are going to use the CSS box shadow property which is one my favourite CSS properties and you will see it in this tutorial and find how easy it is used.
The box-shadow property allows you to easily create multiple drop shadows on box elements by specifying values for colour, size, blur and offset.
The box-shadow property accepts 2-6 options, the required options are horizontal offset and vertical offset, the two optional options are spread distance and colour.
Examples
Browser Support
All of the major newest browsers support box-shadow property.
- Internet Explorer 9.0 and higher
- Firefox 3.5 and higher
- Chrome 1 and higher
- Safari 3 and higher
- Opera 10.5 and higher
With many new CSS3 properties, you need to prefix the property with browser specific tags.
For firefox you need to use -moz-, for chrome/safari you need to use -webkit.
The box-shadow property is not different.
For Firefox 3.5 you need to prefix with -moz-boz-shadow, but for Firefox 4.0 and higher you don’t need to use the prefix.
For Chrome/safari you still need to use the -webkit-box-shadow.
CSS Box Shadow Effect 1
This will create a standard box shadow effect with the shadow moved into the element to create a raised box look.
The HTML
The CSS
CSS Box Shadow Effect 2
This effect will add shadows to the bottom corners of the boxes to create a lifted corner look on the boxes. This effect uses both the :before and :after properties to create new elements used for the corners.
The HTML
The CSS
CSS Box Shadow Effect 3
This uses half of the effect approve and adds a lifted corner to the bottom left of the box.
The HTML
The CSS
CSS Box Shadow Effect 4
Effect 4 will lift the corner on the bottom right of the box.
The HTML
The CSS
CSS Box Shadow Effect 5
This is expanded on the effect 2 and increases the angle of the shadows.
The HTML
The CSS
CSS Box Shadow Effect 6
This effect will create a curved shadow at the bottom of the box.
The HTML
The CSS
CSS Box Shadow Effect 7
This effect uses the previous effect and adds another shadow to the top of the box.
The HTML
The CSS
CSS Box Shadow Effect 8
The final effect will add rounded shadows to either side of the box.