Comment faire un texte en dégradé en CSS : tutoriel complet

Ajouter un texte en dégradé de couleurs en CSS permet de créer un effet visuel attrayant et original pour vos projets web. CSS3 offre plusieurs solutions pour réaliser cette fonctionnalité, chacune avec ses propres avantages et limites.

Méthode 1 : Background-clip et propriétés de texte transparentes

Cette technique consiste à créer un dégradé d’arrière-plan et à l’appliquer au texte tout en rendant sa couleur transparente.

<h1>Texte en dégradé</h1>

.texte-degrade {
    background: linear-gradient(to right, #f00, #0f0);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

Cette technique est simple à implémenter et comporte une très bonne compatibilité avec les navigateurs. En revanche, elle ne fonctionne pas sur plusieurs lignes de texte. Le dégradé s’applique à l’ensemble du bloc, ce qui peut affecter les éléments environnants.

Texte en dégradé radial

.texte-degrade {
    background: radial-gradient(circle at center, #f00, #0f0);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

Dégradé avec plusieurs couleurs

.texte-degrade {
    background: linear-gradient(to right, #f00, #ff0, #0f0);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

Direction du dégradé

Vous pouvez modifier la direction du dégradé en utilisant des valeurs comme to top, to bottom, to left, ou to top right.

Méthode 2 : Utiliser une image en dégradé

Cette méthode consiste à créer une image contenant un dégradé de couleurs et à l’utiliser comme arrière-plan du texte.

.texte-degrade {
    background-image: url('gradient.png');
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

Cela permet de créer des dégradés complexes et personnalisés qui peuvent fonctionner sur plusieurs lignes de texte. En revanche, cela nécessite la création d’une image qui sera susceptible d’augmenter le temps de chargement de la page.

Méthode 3 : Utiliser un pseudo-élément et la propriété filter (CSS moderne)

Cette méthode récente utilise un pseudo-élément et la propriété filter pour appliquer un dégradé directement au texte.

.texte-degrade::after {
    content: attr(data-text);
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    filter: linear-gradient(to right, #f00, #0f0);
    color: transparent;
}

.texte-degrade {
    color: currentColor;
}

C’est une solution moderne et performante, qui fonctionne sur plusieurs lignes de texte mais qui n’est compatible qu’avec les navigateurs récents. De surcroit, elle nécessite une syntaxe CSS plus complexe.

Choisir la meilleure méthode

Le choix de la méthode la plus adaptée dépend de vos besoins spécifiques et de vos priorités.

• Simplicité et compatibilité : Optez pour la technique background-clip si vous recherchez une solution simple et compatible avec la plupart des navigateurs.
• Flexibilité et personnalisation : Privilégiez l’utilisation d’une image en dégradé si vous avez besoin de créer des effets complexes ou de personnaliser l’apparence du dégradé.
• Performance et modernité : Utilisez la méthode filter avec un pseudo-élément si vous recherchez une solution performante et compatible avec les navigateurs récents.