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 !

J'espère que cet article vous aura été utile, et à bientôt sur le blog !

À propos de l'auteur

Hello, je suis Nicolas Brondin-Bernard, ingénieur web indépendant depuis 2015 passionné par le partage d'expériences et de connaissances.

Aujourd'hui je suis aussi formateur/coach pour développeurs web juniors, tu peux me contacter sur nicolas@brondin.com, sur mon site ou devenir membre de ma newsletter pour ne jamais louper le meilleur article de la semaine et être tenu au courant de mes projets !