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>
Leave a Reply