Text Drop Shadows With CSS3

A few years back i worked at a digital agency where one of the guys on the team loved to look at pages and exclaim “its almost there it just needs a drop shadow and we are done”. For years now if you wanted to make some text look “a little bit fancy”, you found yourself starting up Photoshop, typing the text out then applying the “drop shadow” effect saving the images and then embedding in your page as.

CSS3 simplifies this process with the introduction of the text-shadow property which allows the easy placement of a drop shadow effect onto standard text within an element. It is supported in all modern versions of the major browsers except Internet Explorer (hardly a massive surprise there though).

The text-shadow property is used within an element description in the following format:

text-shadow: horizontal-shadow vertical-shadow blur colour;

It accepts four parameters in total, although two of these are optional.

  • horizontal-shadow (Required) – The horizontal position of the shadow effect (Negative values can be provided).
  • vertical-shadow (Required) – The vertical position of the shadow effect (Negative values can be provided).
  • blur (Optional) – The distance the blur extends for.
  • colour (Optional) – The colour of the shadow effect.

Multiple blurs are also able to be placed on the same element. To see some examples of the CSS3 test-shadow property in action, take a look at these examples.

Leave a Reply

Your email address will not be published. Required fields are marked *