HOLLA TECH - LEARN

The text-shadow Property
 

The text-shadow property adds shadow to text.
It takes four values: the first value defines the distance of the shadow in the x (horizontal) direction, the second value sets the distance in the y (vertical) direction, the third value defines the blur of the shadow, and the fourth value sets the color.

The HTML: 

<h1>Text-shadow example</h1>
 

The CSS: 

h1 {
   color: blue;
   font-size: 30pt;
   text-shadow: 5px 2px 4px grey;
}

 

In the example above, we created a shadow using the following parameters:
5px – the X-coordinate
2px – the Y-coordinate
4px – the blur radius
grey – the color of the shadow

Result:

Holla Tech - Learn CSS

NOTE!
To add more than one shadow to the text, add a comma-separated list of shadows.

text-shadow with Blur Effect
 

When working with shadows, you can use any CSS-supported color format.

For the x and y offsets, various types of units can be used (like px, cm, mm, in, pc, pt, etc).
Negative values are also supported.

The example below creates a blue drop-shadow, two pixels higher than the main text, one pixel to the left of it, and with a 0.5em blur:

The HTML:

<h1>Text-shadow with blur effect</h1>

 

The CSS: 

h1 {
   font-size: 20pt;  
   text-shadow: rgba(0,0,255,1) 1px 2px 0.5em;
}

 

Result: 

Holla Tech - Learn CSS

NOTE!
Internet Explorer 9 and earlier do not support the text-shadow property.

BACK TEXT

CLICK ON THE BUTTON BELOW TO GO TO THE CSS MAIN COURSE PAGE. 

CSS MAIN COURSE PAGE

 


© License: All Rights Reserved 


CONTACT HOLLA TECH – LEARN SUPPORT