CSS text color and shadow

Text color
Adding a shadow to the text

Text color

If you don't like the standard text color, you can always change it using the CSS color property, as a value by specifying the color you want, for example color: green;:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
    <style>
      body { color: blue; }
      h1 { color: #00ff00; }
    </style>
  </head>

  <body>
    <h1>Header has its own text color</h1>
    <p>The paragraph will inherit the color of the text from the parent
	element, which is the body element for it.</p>
  </body>
</html>

Try it »

Note: see the names of the color you are interested in, or choose the desired hue and find out its hexadecimal code, you can look in our table of colors.

Adding a shadow to the text

To add a shadow to the text, use the CSS text-shadow property, which can take up to four parameters:

shadow shift to the right (for positive values) or to the left (for negative values) from the text
shadow shift down (for positive values) or up (for negative values) from the text
blurring the shadow, the larger the number, the smoother the shadow, zero means no blurring (it defines a clear and sharp shadow)
color for shadow

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
    <style>			
      h1 { text-shadow: 2px 2px 3px #000; }
    </style>
  </head>

  <body>
    <h1>Text with shadow</h1>
  </body>
</html>

Try it »

You can use the text-shadow property to set multiple shadow effects to text, and each shadow must be separated from the previous comma:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
    <style>
      .test1 {
        background: #CCCCCC;
        color: #CCCCCC;
        font-size: 60px;
        text-align: center;
        text-shadow: 1px 1px 3px #666666,
                    -1px -1px 3px #FFFFFF;
      }
      .test2 {
        color: #707070;
        font-size: 60px;
        text-shadow: 1px 1px 0px #eee,
                     3px 3px 0px #707070;
      }
    </style>
  </head>

  <body>
    <h1 class="test1">Text with shadow</h1>
    <h1 class="test2">Text with shadow</h1>
  </body>
</html>

Try it »

Note: CSS property text-shadow is not supported in IE9 and earlier versions.

With this theme look: