Making titles pretty is usually a job for a graphic designer. They get the concept and work out some font and all that, including shadows for text. But this is no longer needed with the rise of CSS3, introducing text-shadow to style sheets. Syntax: text-shadow: right bottom blur color; Example: text-shadow: 1px 2px 3px #fff; Explanation: 1px to the right, 2px to the bottom, 3px blur, with color #fff. Safari had a text shadow property since css1, and it was proposed in css2, but only in css3 it's widely accepted in many browsers (including mozilla's gecko/webkit. Pro tip: You can use multiple shadows, split them with a comma. Not only does this save the use of graphics, but also the amount of bits/bytes on the page. So pages load faster. It's therefor worth considering if you're making a modern design. As you can see in this example image, we're currently using this on our site. To emphasize and style the titles of the categories (and their description on the right). It makes it more appealing to the eye too). You can of course use this inline as such: html: <div style="text-shadow: 2px 2px 3px green">show a blurry green shadow</div> Or in a class: html: <div class="greenshadow">show a blurry green shadow again</div> css: .greenshadow { text-shadow: 2px 2px 3px green } As you can see, for the color I used "green", you can also use rgb() or #hex, whatever you prefer I guess. Prefix it with -mozilla- or -webkit- to add support for mozilla and webkit browsers that aren't css3 ready 100% yet. (Though latest versions might no longer need this, haven't tested). And I am pretty sure this would make it work on IE/Opera too .. probably not IE hehe. filter: dropshadow(color=green, offx=2, offy=2);
