CSE 154 Examples

Text Shadow Property

The Text Shadow property is used to specify the shadow to a text element.

Description

The text-shadow property takes in 2+ values that specify how the shadow looks around the text element.

  • Horizontal shadow - This field is required and determines where the horizontal component of the shadow is placed. This can also hold negative values for the opposite direction.(px, pt, em ,etc.)
  • Vertical shadow - This field is required and determines where the vertical component of the shadow is placed. This can also hold negative values for the opposite direction.(px, pt, em ,etc.)
  • Blur radius - Can be used to specify the radius of how blurred the shadow is. The default value is 0 for this.
  • Color/None - You can specify the color for the text shadow or specify none to have no text shadow at all.

Syntax :

                  
                      element {
                        text-shadow: horizontal-shadow vertical-show radius-blur color/none;
                      }

                      p {
                        text-shadow: 14px -5px 2px red;
                      }
                  
                

HTML :

CSS :

Live Preview :