CSS text-shadow

CSS3 text-shadow accepts a comma-separated list of shadow effects to be applied to the text of the element.

CSS property text-shadow

  1. blur-radius and color are optional.
  2. If the color of the shadow is not specified, the shadow has the resulting color of the ink that it shadows.
  3. Positive value of shadow-x draws a shadow that is offset to the right of the box. Similarly a negative value to the left.
  4. A positive value of shadow-y offsets the shadow down, a negative one up.
  5. Negative values of blur-radius are not allowed. If the blur value is zero, the shadow’s edge is sharp. Otherwise, the larger the value, the more the shadow’s edge is blurred.
CSS version: CSS 3
Value: [shadow-x] [shadow-y] [blur-radius] [color];
Initial: none
Applies to: all elements

Example – text-shadow

In the following code, CSS property text-shadow can be changed to the following values
  • 2px 2px 3px red
  • 2px 2px red
  • 2px 2px
<style type="text/css">
p {
  text-shadow: 2px 2px 3px red;
<p>text with shadow</p>
Normal text
text-shadow refresh

Specification and Browser compatibility

CSS3 Text-shadowW3C Candidate RecommendationCSS3
Yes 4+ Yes 3.5+ Yes 10+ Yes 12+ Yes 4+ Yes 10.0-10.1+
Android ChromeAndroid FirefoxiOS SafariIE MobileOpera Mobile
Yes 47+ Yes 44+ Yes 3.2+ Yes 10+ Yes 10+
source: caniuse.com
Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit


Click here to write/view comments