Text shadows can be specified via an x-offset, a y-offset, an optional blur radius and a colour; the colour can either appear first or last, as shown below. Multiple text shadows can be combined, by separating them by a comma. You can modify the example below and view the result in the Preview window on the right.


As you may have noticed, a CSS shadow is simply a means to provide a copy of some text shifted spatially, while optionally changing its properties (colour and blurriness) slightly.

In the rest of this tutorial, I have collected a series of interesting examples of text shadows which you can play with and adapt to your taste. Unlike other tutorials, I will essentially offer no other explanation than what has already been provided above and I will let the code speak for itself, inviting you to change it and view the effects immediately.


Your notebook

Keep your personal notes here. These notes are stored by your browser on your own computer, and will be available from any page on this site. You can choose to use html syntax for formatting.


HTML Add Note


  1. Introduction
  2. Simple text shadows
  3. Vintage Retro
  4. Simple 3D Text
  5. 3D Text
  6. 3D Hovering Text
  7. Fire
  8. Neon
  9. Inset
  10. Embossed text