Shadow Text

What's This?

The headings on this page demonstrate a JavaScript object I wrote called shadowText.js.

The advantage is that it allows the developer to add a shadow effect to any text that is ordinarily only achievable with an image, whilst giving the user the freedom to select/copy/paste/whatever as they would with any other text.

It works with any text element, and is customisable to allow bespoke horizontal and vertical orientation (in relation to the original text element), opacity and colour.

Some Examples


This text is a paragraph element and uses a yellow shadow via an inner span element for highlighting.

a great big one!

another shadow

Get the Code

How to Use it

  • Save the script somewhere sensible
  • Import the script, e.g.
    <script src="js/shadowText.js" language="javascript" type="text/javascript"></script>
  • Ensure each HTML text element you wish to add a shadow to has a unique id
  • Near the bottom of your page, preferably the last tag before your </body>, add your shadows, e.g.
    <script type="text/javascript">
      shadow.putShadow('example_shadow', true, -5);
      shadow.putShadow('big_one', true, 3, 3, 'green', 40);
  • And that's it! Check out the shadows above, play around and see what you can come up with. I'd love to see and hear your feedback and suggestions.
  • If you're at all impressed, interested, or just feeling nice, use the bookmarking and sharing facilities at the bottom of the page to spread the word!