Web Designers Journal

Visions Connected To The Web

By

text-shadow (CSS property)

The property specifies one or more text shadow effects to be added to the text content of an element. text-shadow was originally specified in CSS2 but removed from CSS2.1 due to the lack of implementation among browsers. It’s currently also included in the CSS3 Text module.

Shadow effects are applied in the order in which they are specified. They don’t increase the size of a box, though they can extend past its boundaries, and their stack order is the same as the element itself.

text-shadow is inherited in CSS3.

Example

This rule specifies a text shadow effect that’s black, extends 2px to the right of and below the text, and has a 2px blur:

.title {
  text-shadow: 2px 2px 2px #000;
}

Value

Each shadow value must specify a shadow offset and, optionally, a blur radius and color.

The offset is specified using two length values; the first value represents the horizontal distance to the right of the text (if it’s positive), or to the left of the text (if the value’s negative); the second value represents the vertical distance below the text (if it’s positive) or above the text (if it’s negative).

The blur radius is specified after the offset values; it’s a length value that represents the size of the blur effect. If no radius is specified, the shadow will not be blurred.

The color can be specified before or after the offset and blur radius values. According to CSS2, if no color value is specified, the shadow will use the value of the color property instead. However, in CSS3 the specification states that the user agent determines the shadow color in the absence of a specified value.

One Response to text-shadow (CSS property)

  1. webhosting says:

    Whats up, I loved studying your post. Thanks for the nice info. Was hoping that we will extend our friendship by a mutual link exchange? Let me know, and nice to have found you here!