Black and white photograph of a subway seat with 'The City That Never Sleeps' above it

Text effects must be carefully applied in web design: they’re easily overused, and can look gaudy. But if you do need them, there’s a range of possible techniques.

Most of these techniques involve CSS, although the advanced examples also employ and (sometimes) JavaScript. For that reason, I’d suggest a fairly thorough background in HTML, CSS (particularly CSS typography) and a little in the .

Total time: 5 hours

  1. Text Shadows
  2. Stroked text
  3. Extruded text
  4. Animated Neon Sign
  5. Brushed Metal Lettering
  6. Text Clipping Mask

Photograph by Axel Taferner, used under a Creative Commons Attribution NonCommercial ShareAlike license.

Enjoy this piece? I invite you to follow me at to learn more.