The Advantage of Using Gradient Texts

There are many nice text effects possible with CSS. Some can be quite dreamy and surreal in nature when used in the correct context. Like this example, a gradient text, see the picture below:


This is great for page headings particularly on design orientated sites. There is no need to create the image with the gradient in Photoshop or other software choices as using CSS allows for a faster loading image when combined with standard HTML text. Plus, you can use any web fonts in the HTML and CSS. This is useful as you can change the font’s text, scale and color if necessary. These edits can be applied very quickly by using CSS for this effect.

Let us run through the code:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”


<html xmlns=””>


<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />

<title>Gradient Effect(css)</title>

I always include the doctype and head sections to offer complete snippets for you. Now we set the style properties:


h1 {

font: bold 200%/60% “Arial“; position: relative; color: #003366;/* Describe font color*/


Next, an image is needed called gradient.png downloaded here.

h1 span {

background: url(gradient.png) repeat-x;

position: absolute;

display: block;

width: 100%;

height: 75px;




These settings are optimized to give the best effect though changing values can make a difference too. If you wish to change the size of the font and the gradient cover, alter the ‘bold 200%/60% till it balances at the size of the view you are seeking.

We are using a H1 tag to display the text against the gradient. To set the path of the gradient image, we add background: url(gradient.png) repeat-x. The image itself is very small and is stretched by the ‘repeat-x’ part so that it spans the width of the text. Now all we need to do is add the text we want to see displayed against the gradient.


<h1><span></span>Gradient Effect Using CSS</h1>



This CSS method is so much better than creating an optimized image as you can edit this code very quickly for a different text heading, and colors, etc. That’s why you are using CSS in the first place. You want faster loading pages that are cross-browser compatible with that design edge that makes a web site stand out.

Leave a comment