Gradient Text Effect in HTML.

Question

How to display gradient fill effects on text without using image in html.

Answer 1

If you want the text itself to have a gradient, there is a workaround using CSS3 at http://nicewebtype.com/notes/2009/07/24/pure-css-text-gradient-no-pngs/. Another alternative is using Javascript, though can't really go into detail as I don't know much about it. I'm sure many Javascript Frameworks, such as MooTools or jQuery, have functionality for that. If they don't, I'm sure you could find a plugin for jQuery that did.

If you want the text background to have a gradient, then that is possible using CSS3:

/*
 Format: background: gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*);
 Use -mozilla-gradient or -webkit-gradient as these are the only browsers that support it (that I know of).
 For example, an aqua coloured gradient in a Webkit browser:
*/

.text {
 -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(28, 91, 155, 0.8)), to(rgba(108, 191, 255, .9)));

}

Internet Explorer does not support CSS3, nor is it likely they will anywhere in the near future, and considering the majority of internet users are using IE, this is not a good solution.

Javascript is a possibility, but many people have Javascript turned off thanks to the security risks it can carry, and the bad reputation it got in earlier years.

Therefore, images are the only way you can garantee cross-browser compatibility. Sucks, doesn't it?

Answer 2

An alternative to regular images (png, gif & jpg) would be to use the W3C recommended SVG (Scalable Vector Graphics) format. As far as I know its currently only natively supported by Firefox 3+ and Opera 9+, although you can get an Adobe SVG Viewer plug-in for IE6-8.

For a free vector graphics editor take a look at Inkscape

The SVG format is widely used by wikipedia.org. Wikipedia SVG logo