Webmasters Stack Exchange is a question and answer site for pro webmasters. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I want to add shadow to all the text into a website. The text is in different elements of the website.

Now I was thinking of 2 things.

1) add a class to all the containers with text, and just give the class the text-shadow style. This will give me a lot of work tho, adding a class the all the elements in the website. And what will this do with the DOM?

2) Add styling to all the elements:

h1,h2,h3,li,p,span{text-shadow:1px 1px 1px rgba(51, 69, 78, 0.5);}

Which one of the 2 is better to use, or is there a better, more optimized way to do this?

share|improve this question
There doesn't seem to be a question in there – Kris Aug 18 '11 at 15:53
Sorry, I edited this in. Hit that post button to quickly! – Saif Bechan Aug 18 '11 at 15:56
up vote 4 down vote accepted

IMO you should not create a specific class just for text-shadow. That's like adding presentation back into the document. text-shadow should be added to those elements (or predefined classes) that require it. So, of your two options, #2 would be my recommendation, although I would have said you should only be adding it to a subset of predefined classes. And not all elements/classes would require the same type of shadow.

Do you really want to add text-shadow to every bit of textual content?! Large blocks of text should not have text-shadow applied in my opinion. This could make the text harder to read and hence cause some accessibility issues.

share|improve this answer
I'd like to add +2 for "do you really want…" – feeela Aug 18 '11 at 16:12
It's not going to be a website with large chunks of texts. It's more a showcase for html5 and css3 features and designs. – Saif Bechan Aug 18 '11 at 17:09

If this is going to apply to all text, you just need to start with:

body, input, textarea, select {
    text-shadow : 1px 1px 1px rgba(51, 69, 78, 0.5);

On testing, you might need to add one or two other elements for total coverage. For example, note that some form elements had to be included explicitly; they're annoying like that. Also remember this is not going to apply to anything that's not actually in the document, like iframes.

If you really want to cheat, you can just apply the property to the universal selector:

* {
    text-shadow : 1px 1px 1px rgba(51, 69, 78, 0.5);

But given some findings about that being inefficient(it gets applied to every single thing on the page) and the type of processing involved in creating things like shadows, it might not be a great idea.

share|improve this answer

Don't apply it to a bunch of elements individually; just set it at the top and the shadow will apply to all contained text.

body { text-shadow:1px 1px 1px rgba(51, 69, 78, 0.5); }

(If it didn't work this way, then there would be lots of inconveniences from document structure, such as if you specified a shadow on a paragraph which contained a link.)

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.