CSS Properties Index Text Attributes
Adds shadow effects to a text element.
| CSS |
{ text-shadow: length (2,3) [ blur | color ] } |
| Script |
object.style.textShadow = length (2,3) [ blur | color ] |
| Parameter | Description | Value |
|---|
| h-offset |
Required. The horizontal offset of the shadow. A positive value casts the shadow on the right side of the text, a negative value casts the shadow on the left side of the text. |
Floating-point number and a valid CSS length unit: either an absolute units designator ( cm, mm, in, pt, pc, or px ) or a relative units designator ( em or ex ). |
| v-offset |
Required. The vertical offset of the shadow. A positive value casts the shadow below the text, a negative value casts the shadow above the text. |
Floating-point number and a valid CSS length unit: either an absolute units designator ( cm, mm, in, pt, pc, or px ) or a relative units designator ( em or ex ). |
| blur |
Optional. The blur radius. The higher the number, the more blurred the shadow will be. |
Floating-point number and a valid CSS length unit: either an absolute units designator ( cm, mm, in, pt, pc, or px ) or a relative units designator ( em or ex ). |
| color |
Optional. The color of the shadow. If not set, the default value is the current text color for the page. |
String that specifies one of the color names or red-green-blue ( RGB ) values in the Color Table.* |
NOTE: Specifying the color as a color name may not be recognized by some browsers, whereas the RGB color value should always be displayed accurately.
The property is read/write with a default value of none; the CSS attribute is not inherited.
The textShadow property applies an offset version of a text element’s alpha mask drawn in a particular color, composited below or above the text.
A text-shadow declaration requires X and Y offsets relative to the element, and optional blur and color attributes.
Authors can set multiple effects separated by commas. The z-ordering of multiple text shadows is the first specified shadow is on top.
(2,3) in the syntax indicates that two up to three different length values may be specified.
If only two length values are set, they are interpreted as offset-x and offset-y values, respectively.
text-shadow: 3px 3px lightgray |
text-shadow: 3pt 3pt lightgray |
Lorem Ipsum |
Lorem Ipsum |
Negative offset-x value places the shadow to the left of the element. Negative offset-y value places the shadow above the element.
text-shadow: -4px 4px lightgray |
text-shadow: 4px -4px lightgray |
Lorem Ipsum |
Lorem Ipsum |
| |
text-shadow: -3px -3px khaki |
text-shadow: -3pt -3pt wheat |
Lorem Ipsum |
Lorem Ipsum |
If a third length value is given, it is interpreted as a blur attribute.
text-shadow: 4px 4px 6px darkolivegreen |
text-shadow: -4pt 4pt 6pt darkslategray |
Lorem Ipsum |
Lorem Ipsum |
Negative blur values are not allowed and invalidates the entire text-shadow declaration.
text-shadow: 4px 4px -6px lightgray |
Lorem Ipsum |
drop-shadow box-shadow