CSS - text-shadow Property

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

<color>:
- 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>

Print Page