CSS3 Text-Shadow Preview
CSS3 has a property called 'text-shadow' to add a shadow to each letter of some text. In its simplest form, it looks something like this:
text-shadow: 2px 2px 2px #000000;
In the example above the first parameter will create a 2px shadow to the right while the second parameter will drop the shadow 2px down. The third parameter which is optional, will create a 2px blur to the shadow. Finally the last parameter is the color used for the shadow (also optional)
Example 1 - Basic Text Shadow
text-shadow: 2px 2px #FF3333;
This will not work in all
browsers
Image of what it should like like.
![]()
Example 2 - Text Shadow with Blur
text-shadow: 2px 2px 2px #FF3333;
This will not work in
all browsers
Image of what it should look like.
![]()
Example 3 - Text Shadow with White Text
color : white;
text-shadow: 2px 2px 3px black;
This will not work in all
browsers
Image of what it should look like.
![]()
Example 4 - Text Shadow with Neon Glow
text-shadow: 0 0 3px #FF3333;
This will not work in all browsers
Image of what it should look like.
![]()