CSS text-shadow
The CSS text-shadow property is used for applying shadow effects to text.
You can use text-shadow to apply drop-shadows, outer glows, and other shadow effects to text.
The text-shadow property accepts a list of values. Each item in the list can have either two, three, or four values.
The first two values are length values that define the shadow's horizontal offset and vertical offset respectively (these are required values). A third length value can be used define the shadow's blur radius (optional). And a color value can be used to define the shadow's color (optional).
You can apply multiple shadow effects within a single text-shadow declaration by separating each set of values with a comma. Multiple shadow effects are applied in the order specified and may thus overlay each other, but they will never overlay the text itself.
Text shadows are not clipped to the shadowed shape and may show through if the text is partially-transparent. Also, text shadows do not influence layout, and do not trigger scrolling or increase the size of the scrollable area.
Syntax
These values are explained below.
Possible Values
none- No shadow.
- 1st length
- The first length value specifies the horizontal offset of the shadow. A positive value draws a shadow that is offset to the right of the box, a negative length to the left.
- 2nd length
- The second length value specifies the vertical offset of the shadow. A positive value offsets the shadow down, a negative one up.
- 3rd length
- The third length value specifies the blur radius. Larger values result in a more blurred shadow. A value of
0results in a sharp shadow. Negative values are not allowed. - color
- This value specifies the color of the shadow. If this value is not specified, the shadow has the resulting color of the ink that it shadows.
In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:
initial- Represents the value specified as the property's initial value.
inherit- Represents the computed value of the property on the element's parent.
unset- This value acts as either
inheritorinitial, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.
General Information
- Initial Value
none- Applies To
- All elements
- Inherited?
- Yes
- Media
- Visual
- Animatable
- Yes (see example)
Example Code
Official Specifications
The text-shadow property was introduced in CSS2, dropped from CSS2.1, then subsequently reintroduced in CSS3 (under the CSS Text Decoration Module Level 3).
- CSS Text Decoration Module Level 4 (W3C Editor's Draft)
- CSS Text Decoration Module Level 3 (W3C Candidate Recommendation Draft)
- CSS Level 2 (W3C Recommendation 12-May-1998)
Browser Support
Browser support for CSS properties can vary, particularly for newer or experimental features. Check current browser compatibility before using a property in production, especially when supporting older browsers.
Initial Value
CSS properties have an initial value that applies when the property has not been explicitly set. The initial value is different from the value inherited from a parent element and may vary between properties.
Inheritance
Some CSS properties inherit their computed value from their parent element by default, while others do not. The inherit, initial, unset, and revert keywords can also be used to control how a property gets its value.
Vendor Prefixes
Most modern CSS properties use the standard, unprefixed syntax. Vendor-prefixed properties such as -webkit- are mainly relevant to older browser versions or specific features and should only be used when required by your browser support targets.