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?

2 Answers 2


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

See here https://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


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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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