”;
The text-shadow property is used to add a shadow effect to text. It allows you to specify the color, offset, blur-radius, and spread-radius of the shadow.
Possible Values
-
-
Sets the color of the shadow.
-
It is optional.
-
It can be specified either before or after the offset values.
-
Any value for color can be specified, such as, name, HEX or RGB value.
-
-
<offset-x><offset-y>:
-
Any length value, specifying the x and y values.
-
x value represents the shadow”s horizontal distance from text.
-
y value represents the shadow”s vertical distance from text.
-
If x and y values equal 0, the shadow appears behind the text.
-
-
<blur-radius>
-
Any length value, specifying the value of blur-radius.
-
It is optional.
-
To make the blur look bigger, you need to provide higher value.
-
If no value is passed, it is taken as 0.
-
Applies to
All the HTML elements.
DOM Syntax
object.style.textShadow = "5px 5px 3px red";
-
The first two (5px,5px) values specify the length of the shadow offset i.e the X-coordinate and the Y-coordinate.
-
The third value (3px) specifies the blur radius.
-
The last value (red) describes the color of the shadow.
CSS text-shadow – Simple Shadow Effects
Following is the example which demonstrates how to set the shadow around a text. This may not be supported by all the browsers −
<html>
<head>
</head>
<body>
<h2>Text Shadow</h2>
<p style="text-shadow: 5px 5px 3px yellow;">Text shadow</p>
<p style="text-shadow: 10px 5px #00ffff;">Text shadow</p>
<p style="text-shadow: blue 0px 0px 2px">Text shadow</p>
<p style="text-shadow: rgb(26, 69, 105) 0px 0px 10px">Text shadow</p>
</body>
</html>
”;