Quick Reach
The text-shadow property
To make text looking prominent and beautiful, CSS comes up with the text-shadow property. If CSS text-shadow property is used properly, this may enable you to avoid using images in the web page for text styling.
>>See an example of text-shadow
Note: IE 9 and earlier browsers do not support the text-shadow property.
The text-shadow property takes four values out of which two are required and two are optional. This is explained in the following section.
Syntax of CSS text shadow
Following is the general syntax of using the text-shadow CSS property.
text-shadow: horizontal-shadow vertical-shadow blur color;
The horizontal and vertical shadow values are required while blur and color are optional. The Color value defines the shadow of the text.
Horizontal and vertical shadows example
This example uses the horizontal and vertical shadow values in heading (h1 tag) text. As no color value is specified in the CSS text-shadow property, it will take text’s color for the shadow.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<html>
<head>
<style>
/*CSS text properties*/
h1
{
background-color: #F0F0F0;
color: #3355bb;
text-shadow: 2px 3px;
}
p
</style>
</head>
<body>
<h1>This is text shadow demonstration!</h1>
</body>
</html>
|
A text-shadow example with blur value
We will use the same example as above and just add the Blur value in text-shadow CSS property. See demo by clicking the link:
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<html>
<head>
<style>
/*CSS text properties*/
h1
{
background-color: #F0F0F0;
color: #3355bb;
text-shadow: 2px 3px 4px;
}
p
</style>
</head>
<body>
<h1>This is text shadow demonstration!</h1>
</body>
</html>
|
Adding shadow color to text-shadow
This example applies all four values, including shadow color to the heading 1 and heading 2.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
<html>
<head>
<style>
/*CSS text properties*/
h1
{
background-color: #F0F0F0;
color: #800000;
text-shadow: 2px 3px;
}
h2
{
background-color: #F0F0F0;
color: #BB33bb;
text-shadow: 3px 5px 4px #E399E3;
}
h3
{
background-color: #F0F0F0;
color: #800000;
text-shadow: 3px 4px 4px #ff9b9b;
}
h4
{
background-color: #F0F0F0;
color: #BB33bb;
text-shadow: 2px 3px 4px #00BBff;
}
</style>
</head>
<body>
<h1>Text shadow with horizontal and vertical value!</h1>
<h2>Text shadow with horizontal, vertical and blur value!</h2>
<h3>Text shadow with shadow color value!</h3>
<h4>Another text shadow example with all four values</h4>
</body>
</html>
|
Similarly, you may create CSS shadows in div, paragraphs and other elements of HTML.
Also see CSS text
Leave A Comment?