CSS3 Tutorial: gradient text

Text with gradient background >

If we want to pimp our HTML text a bit, we could, beside adding some text shadow, as discussed in the CSS3 tutorial about text-shadow, provide the text with a gradient effect using a alpha transparant .png image, like in the example below:

Example1: adding a gradient effect to a HTML text

The .png image

alpha transparante .png Image

The HTML code

<!DOCTYPE html>
<meta charset="UTF-8">
<title>Text with gradient effect</title>
	<link href="css/articles_styles.css" rel="stylesheet" type="text/css" media="screen">
<!--[if lt IE 9]
	><script src=http://html5shiv.googlecode.com/svn/trunk/html5.js> </script>
<body style="background:#000">
<h1><span></span>Gradient text</h1>
Pay attention to the extra <span> tags inside the <h1> tags. This is where we place our .png image.

The CSS in article_styles.css

 /* Generated by Font Squirrel (http://www.fontsquirrel.com) */
@font-face {
    font-family: 'VTCLettererProRegular';
    src: url('../fonts/VTC_letterer_pro-webfont.eot');
    src: url('../fonts/VTC_letterer_pro-webfont.eot?#iefix') 
    font-weight: normal;
    font-style: normal;

/*Tekst with gradient effect*/
    h1 {font-family: 'VTCLettererProRegular'; 
    font-size: 90px; 
    margin: 50px;   
    position: relative;

h1 span {
    background: url(../images/text_gradient.png) 
    height: 90px; 
    position: absolute; 
    width: 100%;
Echte (HTML) tekst met gradient effect.
Image 1. Real HTML text with a gradient effect.

For semantical purists

The empty <span> tags in the HTML code have semantically any meaning and therefore shouldn't be present in the HTML markup. We could solve this by placing the <span> dynamically with e.g. jQuery after the page has been loaded. This way the <span> is not to be found in the HTML page code, but still is latently present.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
 //koppel span tag aan h1

Check this example in your browser

Leave a comment