Web DesigningCMS

Creating text-shadows and other text effects using CSS


Text-shadows: The text-shadow property is not new to CSS-3, it was introduced back in CSS-2, but browsers only started to take it into account recently.

As the name implies, the text-shadow property allows you to create a shadow for text using CSS. Below is the text-shadow syntax.



The first value determines the offset of the shadow along the X-axis, i.e., horizontally. If the value is positive, it determines the offset of the shadow to the right of the text, with a negative value, the offset of the shadow to the left of the text. Similarly, the second positive value determines the offset along the Y-axis (vertical), a positive value determines the offset below the text, the negative creates a distance above the text.

The third positive value determines the blur radius of the shadow. If no value is specified, there will be no blur.

Creating text effects with the text-shadow property.

With the text-shadow property, you can make some text effects that you previously could only do with a photoshop or other graphics editor. To get a general idea of how text-shadow can be used, we’ll look at some examples below.

1. A simple shadow for text on CSS

This is a simple example of using the text-shadow property. It creates a 2px shadow along the X-axis and Y-axis, as well as a blur radius of 2px.

text-shadow:2px 2px 2px #48577D;

A simple shadow for text on CSS

2. Style engraved text

In this case, only the vertical offset is indicated, without blurring.

color: #666;
text-shadow: 0px 3px 0px #666;

Style engraved text

3. Glowing text effect

The glowing effect can be made by adding only the blur radius.

text-shadow:0 0 20px #FFE30A;

Glowing text effect

4. Blurred text

In the example below, everything is done similarly to the previous one, i.e., only the blur radius is specified without horizontal or vertical offset. However, in this example, a transparent color value was used, which indicates that the background color should be transparent. This gives a blur effect.

color: transparent;
text-shadow: 0 0 10px #333;

Blurred text

5. Use multiple shadows

You can specify multiple shadows for the text, separated by commas. An example of using multiple shadows:

text-shadow: 0 0 4px #F24405,
0 -5px 4px #F27405,
2px -10px 6px #F29F05,
-2px -15px 11px #F2E205,
2px -18px 18px #222601;

Use multiple shadows

6. Embossed text

In the example below, two shadows are used. In the first shadow, the horizontal and vertical values are negative, and in the second shadow, positive values are used, which gives relief to the text.

text-shadow: -1px -1px #FFF,
1px 1px #333;

Embossed text

7. The border around the text

The following code creates a border effect for text.

text-shadow: 0 -1px #00468C,
1px 0 #00468C,
0 1px #00468C,
-1px 0 #00468C;

Border around the text

8. Text in 3D style

A 3D text effect can be created using multiple shadows. To achieve the effect, each shadow is slightly enlarged using the same color.

text-shadow: 2px 2px #F27405,
3px 3px #F27405,
4px 4px #F27405,
5px 5px #F27405

Text in 3D style

Show Comments (0)

Leave a Reply

Your email address will not be published. Required fields are marked *

fourteen − twelve =