text-shadow is not new property in CSS3, infact it was introduced in CSS 2, however the browsers have implemented it recently. As the name refers, the
text-shadow property allows to create text shadow. Following is the syntax of the
In the above syntax, the first positive value represents the x-axis (horizontal) distance to the right of text. In case of negative value, the distance is to the left of the text.
Similarly, the second positive value represents y-axis (vertical) distance below the text. The negative value creates distance above the text.
The third optional value is for the blur representing radius of blur. If no blur value is specified, there will not be blur in shadow.
Decorating text with text-shadow
With CSS property
text-shadow we can make some cool text effects which were earlier possible by photoshop etc. Following are some examples to give an idea how we can use the
text-shadow to decorate the text.
1. Simple Shadow
This is example of simple use of text shadow property. It creates 2px shadow to x-axis, y-axis and blur of 2px radius.
color:#7690CF; text-shadow:2px 2px 2px #48577D;
2. Engraved Style Text
Only vertical distance is specified with no blur.
color: #666; text-shadow: 0px 3px 0px #666;
3. Glowing text effect
Glowing effect can be added by specifying only blur radius as following:
color:#FAF4E8; text-shadow:0 0 20px #FFE30A;
4. Blur text
The example below is similar to the above, i.e. only blur radius is specified with no horizontal or vertical distance. However in this example, we have used color value transparent, which specifies that the background color should be transparent. This gives the blur effect.
color: transparent; text-shadow: 0 0 10px #333;
5. Using Multiple Shadows
We can specify multiple text shadows separated by a comma. The multiple shadows are applied from front to back, ie. the first shadow is on top. An example of multiple
text-shadow is given below.
color:#F2B405; text-shadow: 0 0 4px #F24405, 0 -5px 4px #F27405, 2px -10px 6px #F29F05, -2px -15px 11px #F2E205, 2px -18px 18px #222601;
6. Emboss text
In the example below, we use two shadows. In the first shadow, the horizontal and vertical values are negative, and in the second shadow these are set to be positive to create emboss text effect.
color:#ccc; text-shadow: -1px -1px #FFF, 1px 1px #333;
7. Border Around the text
The following code creates the border effect.
color:#7FCAEB; text-shadow: 0 -1px #00468C, 1px 0 #00468C, 0 1px #00468C, -1px 0 #00468C;
8. 3D Style Text
The 3D style text effect can be created by using multiple shadows. Each shadow is just slightly increased in using the same color.
color:#F2B405; text-shadow: 2px 2px #F27405, 3px 3px #F27405, 4px 4px #F27405, 5px 5px #F27405
If you have any questions, please feel free to leave a comment.