CSS Text Shadow Generator


 Explore Text Shadow Styles
Preview Text







Text Shadow

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

The syntax for this kind of box-shadow is –

.textShadowClass {
	-webkit-text-shadow : 10px 5px 5px  rgba(98,98,98,0.83) ;
	-moz-text-shadow : 10px 5px 5px  rgba(98,98,98,0.83) ;
	-ms-text-shadow : 10px 5px 5px  rgba(98,98,98,0.83) ;
	-o-text-shadow : 10px 5px 5px  rgba(98,98,98,0.83) ;
	text-shadow : 10px 5px 5px  rgba(98,98,98,0.83) ;
}

Elements for this text 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 fo 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.

text-shadow : 10px 5px 5px rgba(98,98,98,0.83) ;- 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 text 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 –

.textShadowClass{
	font-family: Arial, Helvetica, sans-serif;
	color: rgba(0,0,0,0.6) ;
	-webkit-text-shadow : 2px 8px 6px  rgba(0,0,0,0.2) ,0px -5px 35px  rgba(255,255,255,0.3) ;
	-moz-text-shadow : 2px 8px 6px  rgba(0,0,0,0.2) ,0px -5px 35px  rgba(255,255,255,0.3) ;
	-ms-text-shadow : 2px 8px 6px  rgba(0,0,0,0.2) ,0px -5px 35px  rgba(255,255,255,0.3) ;
	-o-text-shadow : 2px 8px 6px  rgba(0,0,0,0.2) ,0px -5px 35px  rgba(255,255,255,0.3) ;
	text-shadow : 2px 8px 6px  rgba(0,0,0,0.2) ,0px -5px 35px  rgba(255,255,255,0.3) ;
}


Browser Support

CSS Property Chrome IE Mozilla Safari Opera
text-shadow 4.0 10.0 3.5 4.0 9.6