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.

Example

<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.

Example

<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.

Example

<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.

Example

<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.

Example

<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.

The text-shadow does not occupy space and does not trigger any scrolling. And it does not affect the structure of surrounding elements (layout).

text shadow generator is also available to generate text shadow.


Was this article helpful?

 

Email:

Message: