Shades of CSS

If you look closely, you may notice that the above headline written in a blue font has a faint shadow seemingly appearing under each letter. Similarly, this text is in a window that appears to be floating above the page due to a shadow that borders it on two sides. These shadows are obtained using the CSS 3 text-shadow property.

In this tutorial, you will see various effects that one can obtain using text shadows. Note that while the text-shadow property is part of CSS3, some browsers differ in the way they have implemented it. In particular, I have found that Firefox tends to create "blurs" that are a lot more blurry (i.e. spatially spread out) than webkit-based browsers (Chrome and Safari) - these three being the only browsers that I do tests in.


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