Et oui c’est possible avec CSS d’appliquer un effet dégradé sur des titres <h1>, <h2> ou <h3> En réalité la technique est simple.

Tout d’abord la syntaxe HTML pour mettre en place le système est :

• <h2>Mon titre<span></span></h2>

Puis du coté CSS il va falloir placer un PNG semi-transparent par dessus puis générer l’effet de dégradé!

Votre balise de titre

• h2 {
  font-size:220%;
  color:#0079b6;
  font-weight:normal;
  letter-spacing:-.05em;
  margin:.6em 0;
  position:relative;
  }

Notre petit degradé !

• h2 span{position:absolute;
  display:block;
  top:0;
  left:0;
  height:100%;
  width:100%;
  background:url(gradient_1.png) repeat-x;
  }

Et pour que ça soit compatible avec les navigateurs  :

• * html h2 span{
  background-color:#fff;
  back\ground-color:transparent;
  background-image: url(none.gif);
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src= »gradient_1.png », sizingMethod= »scale »);
  }

Vous pouvez télécharger la Démo ici :

ou voir le site de l’éditeur sur : http://cssglobe.com/lab/textgradient/