Affichez des textes en dégradé simplement avec HTML et CSS

Envie d'un peu de fantaisie, de "néon" ou de kitsch dans vos designs, rien de tel que du texte coloré avec un dégradé pour pimenter votre site ou votre application web !

Le fonctionnement

En CSS, il existe une propriété appelée "background-clip" et qui permet d'avoir une fonctionnalité très utilisée dans les logiciels de designs : le "masque de forme".

Pour avoir un texte en dégradé, il suffira de créer un "gradient" en arrière-plan de notre texte, et de créer le masque de forme sur notre texte.

Voici un exemple très concret, avec quelques lignes de code seulement.

Tutoriel

HTML

<span>Gradient text</span>

Prenons un élément de texte simple, il peut en réalité s'agir de n'importe quel élément, mais celui-ci doit pouvoir contenir une couleur de fond. C'est pour cette raison que la première ligne de notre CSS transforme cet élément en inline-block.

CSS

display: inline-block;
background: linear-gradient(to left, rgb(255,0,0), rgb(121,121,244));
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

On vient ajouter notre dégradé (ici un linear-gradient) et notre masque de forme (background-clip) et le tour est joué !

Le rendu

Ici le rendu a été fait sur un bouton noir pour améliorer la lisibilité, mais libre à vous de choisir vos couleurs !

À noter

La couverture de cette fonctionnalité (background-clip) atteint les 98.04% de support (avec préfixe webkit), vous y aurez donc accès sur quasiment tous les navigateurs (hors Internet Explorer).

L'utilisation des dégradés est très sensible tant sur le design qu'au niveau de l'accessibilité, et de manière encore plus forte sur du texte. Soyez sûr de vous avant de l'implémenter dans vos design web.

Le masque de forme peut être utilisé pour créer bien d'autres choses intéressantes, que je vous laisserai découvrir ici !