CSS text-shadow

text-shadow property represents shadow effect of the text. This property can accept more than shadow effects separated by comma.

There are four components of the text-shadow effect. We'll discuss one by one. And then we'll specify a list of shadow effects.

Components of shadow effects

Shadow color

Specify the color of shadow. The value may be in decimal or hexadecimal form.

<style>
h1{
 text-shadow:blue;	
}
</style>

If we don't specify color for the text-shadow, the color of the shadow will be the same as the color of text.

X-component

It is the first component of the shadow. This component represents the offset of the shadow along the x-axis.

<style>
h1{
 text-shadow:3px 0px blue;	
}
</style>
Try </>

The second value is the y-component of the shadow. We have to specify y value necessarily with the x value.

Y-component

It represents the vertical offset of the shadow.

<style>
h2{
 text-shadow:0px 3px blue;	
}
</style>
Try </>

The first and second values are the horizontal and vertical offsets of the shadow. We have to specify x value necessarily with the y value.

Blur value

The shadow becomes blurred because of this value. It is an optional value.

<style>
h1{
 text-shadow:0px 3px 3px blue;	
}
</style>
Try </>

The third value represents the value of blur. More the value, more the shadow becomes blurred.

A list of shadow effects

The shadows never overlay the text but may overlay each other. The stacking order of shadows is from front to back.

<style>
h1{
 text-shadow:1px 1px 0px green, -1px -1px 0px red;		
}
</style>
Try </>

The first shadow effect is on front and the second shadow effect is on back.

text shadow generator is also available to generate text shadow.