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

Preparing for a meeting with our designer later today, I was looking through his Photoshop sketches and wonder whether the following one could be expressed in HTML/CSS, without the need to render the text in Photoshop:

Example text with glossy effects

Do you think the color gradient and the drop shadow could be done 70-90% similar to the original within plain HTML and CSS, too?

Ideally even older browsers should at least be able to draw the text in a readable manner.

I found this one back from 2008, maybe there is a more modern way of doing it nowadays?

share|improve this question
up vote 2 down vote accepted

You could create your own FONT and embed that on the page.

See here http://stackoverflow.com/questions/220236/how-to-embed-fonts-in-html

However unless you need the text to be dynamic I would just recommend using a image. It will look better and be guaranteed to looked identical on all browsers

share|improve this answer

You could use CSS3 gradients and drop-shadows for that desired effect, older browsers would just display a block colour, which would be fine.

It would load much quicker than an image as well as being easier to edit, it would be the right thing to do.

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.