Comme indiqué à la fin de mon gloubi tuto sur le texte en dégradé, il est maintenant possible d’obtenir un résultat similaire uniquement avec CSS3.

Les techniques CSS utilisées

Pour réaliser un texte en dégradé avec CSS3, on utilise deux techniques : les dégradés et le découpage d’arrière-plan (propriété CSS background-clip).

J’ai déjà présenté ces deux techniques chacune dans un article dédié :

• les dégradé en CSS
• texte avec un arrière-plan défilant

Fusion !

Il est maintenant temps de rassembler ces deux techniques.

Premièrement, voyons le HTML (très simple) :

<span class="gradient_text">Texte en dégradé</span>

Concernant le CSS, ce n’est pas plus compliqué que ce qui a déjà été présenté précédemment.

D’abord, on défini le dégradé :

background: linear-gradient(90deg,#ff0000 0%, #ffb200 25%, #aaffc3 50%, #00e3ff 75%, #0000ff 100%);

Et ensuite on fait en sorte que cet arrière-plan ne soit visible qu’à travers notre texte :

-webkit-background-clip: text;
background-clip: text;
color: #0000;

Ce qui donne :

.gradient_text {
    background: linear-gradient(90deg,#ff0000 0%, #ffb200 25%, #aaffc3 50%, #00e3ff 75%, #0000ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: #0000;
}

Résultat final :

Et voilà, vous êtes maintenant capable de créer un texte en dégradé avec seulement quelques lignes de CSS.

À bientôt pour d’autres articles à caractère informatif.