text-shadow - HTML CSS CSS Property

HTML CSS examples for CSS Property:text-shadow

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. text-shadow

Description

The text-shadow CSS property sets one or more text shadow effects to the text content of an element.

The following table summarizes the text-shadow Property.

Item Value
Default value: none
Applies to:All elements. It also applies to ::first-letter and ::first-line.
Inherited: Yes
Animatable: Yes.

Syntax

The syntax of the property is as follows: 


text-shadow:      shadow1 [, shadow2, ... shadowN] | none | inherit where shadow is: [offset-x offset-y blur-radius color]

Property Values

The following table describes the values of this property.

The following values must be specified for the property.

Value Description
h-shadow Set the horizontal distance to the right of the text.
v-shadow Set the vertical distance below the text.

The following values are optional.

Value Description
blur Specify the blur size.
colorSpecify the color of the shadow.
inherit take the value of its parent element text-shadow property.

The example below shows the text-shadow property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS text-shadow property</title>
  <style type="text/css">
    h1 {<!--  ww w  . j  a  va 2 s  .  co m-->
      text-shadow: 2px 2px 5px #000;
    }
    p {
      text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    }
    </style>
 </head>
 <body>
  <h1>Text-shadow Effect</h1>
 </body>
</html>

Related Tutorials