How To Use text-shadow effectively

Do you want to use the text-shadow CSS property to great effect? Here are some tips on the way the text-shadow property is used within templates on this site. Used correctly, it can really make text stand out and catch the eye. This is so simple to achieve and gives such a great effect.

1. Dark Text - Light Shadow

Dark Text - Light Shadow


Dark text with a light shadow can be achieved as follows:

/******  HTML  ******/

Dark Text - Light Shadow


/******  CSS  ******/

.how_to_text_shadow_dark h3
{ font: 250% normal arial, sans-serif;
  color: #000;
  text-shadow: 1px 1px #FFF;
  background: #AAA;}

2. Light Text - Dark Shadow

Light Text - Dark Shadow


Light text with a dark shadow can be achieved as follows:

/******  HTML  ******/

Light Text - Dark Shadow


/******  CSS  ******/

.how_to_text_shadow_light h3
{ font: 250% normal arial, sans-serif;
  color: #FFF;
  text-shadow: 1px 1px #000;
  background: #AAA;}

3. Dark Text - Dark Shadow

Dark Text - Dark Shadow


Dark text with a dark shadow can be achieved as follows:

/******  HTML  ******/

Dark Text - Dark Shadow


/******  CSS  ******/

.how_to_text_shadow_dark_dark h3
{ font: 250% normal arial, sans-serif;
  color: #000;
  text-shadow: 0px 1px 0px #898989;
  background: #323232;}

4. Light Text - Light Shadow

Light Text - Light Shadow


Light text with a light shadow can be achieved as follows:

/******  HTML  ******/

Light Text - Light Shadow


/******  CSS  ******/

.how_to_text_shadow_light_light h3
{ font: 250% normal arial, sans-serif;
  color: #FFF;
  text-shadow: 0px 1px 0px #CCC;
  background: #EEE;}

Back to the How To page.