CSS Box Shadow Generator


 Explore Box Shadow Styles
Preview









Box Shadow

This tool is used to cast a shadow for any object in your website design without the need of adding any additional images or elements. A basic Box shadow for an object is –

The syntax for this kind of box-shadow is –

.boxShadowClass {
	-webkit-box-shadow : -1px -9px 31px 2px rgba(39,122,49,0.7) ;
	-moz-box-shadow : -1px -9px 31px 2px rgba(39,122,49,0.7) ;
	-ms-box-shadow : -1px -9px 31px 2px rgba(39,122,49,0.7) ;
	-o-box-shadow : -1px -9px 31px 2px rgba(39,122,49,0.7) ;
	box-shadow : -1px -9px 31px 2px rgba(39,122,49,0.7) ;
}

Elements for this box shadow class are -

1. Horizontal Offset – It specifies the horizontal distance between the image and its shadow. Negative value will move shadow to its left.
2. Vertical Offset - It specifies the vertical distance between the image and its shadow. Negative value will move shadow above the image.
3. Blur Radius – Larger the value, bigger the blur thus covering a larger area. The shadow becomes bigger and lighter. Here, the value ranges between 0 to the higher value required.
4. Spread -  Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink. If not specified, it will be 0 (the shadow will be the same size as the element).
5. The rgb index for color – Specify the color of shadow
6. Opacity - defined in the rgba function – As the name suggests, it defines the shadow’s opacity. Lesser value makes the shadow transparent and hence invisible.

box-shadow : -1px -9px 31px 2px rgba(39,122,49,0.7) ; - a general definition which will run for all browsers. But, if we want it to be more specific for each browser like IE, Chrome, Mozilla Firefox, Safari, Opera.

Firefox 3 supported border radius rules via their "-moz-" prefix, while webkit browsers such as Safari and Chrome use the "-webkit-" prefix. “ms” prefix is used for Microsoft Internet Explorer. “o” prefix is for Opera.

The order of these rules is important. We define the webkit and Mozilla rules first and then the box shadow rule. This is so that when this property finally becomes standardised, supporting browsers will use the final rule in this set and ignore the previous rules.

Here, for Box Shadow tool, we also have the option of adding the border style and radius. The tutorials for using border style and radius can be found here.

There is also advanced option for adding multiple layers of shadow for an object. An example –

The syntax for this is –

.boxShadowClass{
	-webkit-box-shadow : 0px 3px 6px 0px rgba(0,0,0,0.16) ,0px 3px 6px 0px rgba(0,0,0,0.23) ;
	-moz-box-shadow : 0px 3px 6px 0px rgba(0,0,0,0.16) ,0px 3px 6px 0px rgba(0,0,0,0.23) ;
	-ms-box-shadow : 0px 3px 6px 0px rgba(0,0,0,0.16) ,0px 3px 6px 0px rgba(0,0,0,0.23) ;
	-o-box-shadow : 0px 3px 6px 0px rgba(0,0,0,0.16) ,0px 3px 6px 0px rgba(0,0,0,0.23) ;
	box-shadow : 0px 3px 6px 0px rgba(0,0,0,0.16) ,0px 3px 6px 0px rgba(0,0,0,0.23) ;
}


Browser Support

CSS Property Chrome IE Mozilla Safari Opera
box-shadow 10.0 / 4.0 -webkit- 9.0 4.0 / 3.5 -moz- 5.1 / 3.1 -webkit- 10.5