Text-shadow part 2

• COURSES
• CODE PLAYGROUND
• DISCUSS
• TOP LEARNERS

text-shadow

74

2/2

   

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;
}Try It Yourself

Result:
Internet Explorer 9 and earlier do not support the text-shadow property.