CSS - text-shadow



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>
Advertisements