Générateur CSS de texte en dégradé, gratuit

Comment utiliser

1. Choisissez vos couleurs : sélectionnez deux couleurs ou plus pour le dégradé à l'aide des sélecteurs.
2. Réglez l'angle et le style : choisissez dégradé linéaire ou radial, ajustez l'angle, et ajoutez éventuellement une position de point de couleur.
3. Copiez le CSS : le code CSS généré utilise background-clip: text et -webkit-background-clip: text pour l'effet de texte en dégradé, copiez-le directement dans votre feuille de style.

Pourquoi utiliser le générateur de texte en dégradé ?

Le texte en dégradé est l'un des effets CSS modernes les plus populaires pour les titres, les logos et les textes d'appel à l'action. L'obtenir nécessite une combinaison spécifique de propriétés CSS (background, background-clip, -webkit-text-fill-color) facile à rater. Ce générateur gère la syntaxe inter-navigateurs automatiquement et offre un aperçu en direct pour perfectionner votre dégradé avant d'écrire la moindre ligne de code.

Fonctionnalités

• Points de couleur multiples : ajoutez autant de points de couleur que nécessaire pour des effets de dégradé complexes.
• Linéaire et radial : choisissez entre des dégradés linéaires directionnels et des dégradés radiaux centrés.
• Contrôle de l'angle : réglez l'angle du dégradé de 0° à 360° avec un cadran visuel.
• Aperçu en direct : voyez votre texte en dégradé se mettre à jour en temps réel avec votre exemple.
• CSS inter-navigateurs : la sortie inclut les préfixes -webkit et des solutions de repli pour une compatibilité maximale.

Questions fréquentes

Comment fonctionne le texte en dégradé CSS ?

Le texte en dégradé CSS fonctionne en appliquant un dégradé en arrière-plan de l'élément, puis en découpant cet arrière-plan selon la forme du texte avec background-clip: text, et en rendant la couleur du texte transparente avec -webkit-text-fill-color: transparent (ou color: transparent). Seule la découpe en forme de texte du dégradé est visible.

Le texte en dégradé fonctionne-t-il dans tous les navigateurs ?

Le texte en dégradé CSS fonctionne dans tous les navigateurs modernes, Chrome, Firefox, Safari et Edge. La propriété -webkit-background-clip: text est bien prise en charge. Prévoyez toujours un repli en couleur unie pour les très vieux navigateurs via la propriété color.

Puis-je utiliser cela à n'importe quelle taille de police ?

Oui. Le texte en dégradé s'adapte parfaitement à la taille de police, c'est du CSS pur, pas une image, il reste donc net à toute résolution, y compris sur les écrans haute densité.

Une brève histoire du texte en dégradé sur le web

Le texte en dégradé est devenu visuellement possible sur le web avec la propriété -webkit-background-clip: text de WebKit, une extension expérimentale Safari/Chromium proposée par l'équipe WebKit en 2008 comme moyen de remplir les formes de glyphes du texte avec un arrière-plan arbitraire (dégradé, image, n'importe quoi). La technique est restée non officielle pendant des années : Firefox a livré background-clip: text sans préfixe seulement dans la version 49 (septembre 2016), et le CSS Backgrounds Module Level 4 l'a formalisée comme un projet de travail W3C à partir de 2018 environ. La syntaxe de dégradé sous-jacente a évolué séparément. Le CSS Images Module Level 3 (Recommandation W3C 2017) a standardisé linear-gradient() et radial-gradient() comme valeurs d'image de première classe ; conic-gradient() a suivi dans le Module Level 4 (Chrome 69 septembre 2018, Safari 12.1 mars 2019, Firefox 83 novembre 2020). La combinaison de ces deux spécifications est ce qui rend possible aujourd'hui un titre en dégradé d'une ligne. L'adoption a explosé dans la communauté des développeurs lorsque Tailwind CSS a livré ses classes utilitaires bg-clip-text dans la v1.4 (2020), faisant des titres en dégradé une primitive prête à l'emploi. L'identité de marque moderne s'appuie désormais sur le texte en dégradé comme signature visuelle : la série «Bridges» de Stripe, le logotype en dégradé de Linear, la page d'accueil de Vercel, le marketing WWDC d'Apple et le magasin de modèles de Notion utilisent tous cette technique. Le motif combiné background-clip: text + dégradé a effectivement remplacé le «PNG d'un titre stylisé» qui dominait le design web 2005-2015, supprimant en une seule fois une catégorie de problèmes d'accessibilité et de performance.

L'anatomie du texte en dégradé CSS

• Le dégradé lui-même. background-image: linear-gradient(90deg, #f00, #00f) définit l'arrière-plan de l'élément sur un dégradé à 90 degrés allant du rouge au bleu. Le dégradé peut être linéaire (directionnel), radial (centré), conique (balayage rotatif), ou n'importe quelle variante répétitive. Les dégradés CSS sont des valeurs d'image, pas des valeurs de couleur, ce qui les rend coupables à une forme de texte.
• background-clip: text. Indique au navigateur de rendre l'arrière-plan uniquement à l'intérieur de la géométrie des glyphes rendus. Sans cette seule propriété, le dégradé remplit toute la boîte de l'élément ; avec, le dégradé est restreint au contour du texte. À l'origine une extension WebKit préfixée comme -webkit-background-clip: text, désormais également sans préfixe dans Firefox 49+ (2016) et les navigateurs basés sur Chromium.
• color: transparent ou -webkit-text-fill-color: transparent. Une fois l'arrière-plan coupé sur le texte, le résultat visible dépend encore de la couleur que le texte lui-même peint sur l'arrière-plan. Définir color: transparent (ou le -webkit-text-fill-color: transparent préfixé) laisse le dégradé transparaître. Sans cela, la couleur de texte solide peindrait simplement par-dessus le dégradé coupé.
• La chaîne de préfixes -webkit-. Safari, la plateforme avec le plus d'historique de préfixes accumulés, analyse encore les propriétés sans préfixe, mais les versions préfixées restent dans le code de production pour des raisons héritées. La sortie de ce générateur inclut à la fois background-clip: text et -webkit-background-clip: text pour que la technique fonctionne jusqu'à Safari 14 et tous les navigateurs basés sur WebKit hérités.
• Types de dégradés et stops. linear-gradient(angle, color1, color2, ...) va dans une direction ; radial-gradient(shape at position, ...) émane d'un point ; conic-gradient(from angle at position, ...) balaie autour comme une aiguille d'horloge. Chacun accepte arbitrairement de nombreux stops de couleur, avec des positions explicites (red 0%, blue 50%, green 100%) pour un contrôle fin sur l'endroit où chaque couleur commence et finit.

Modèles d'utilisation réels du texte en dégradé

• Titres d'identité de marque. La série «Bridges» de Stripe, le héros produit de Linear, la bannière «Develop. Preview. Ship.» de Vercel utilisent tous le texte en dégradé comme signature de marque. Les wordmarks à couleur unique semblent datés pour les SaaS en démarrage, tandis que les titres en dégradé portent l'indice visuel «construit en 2024».
• Titres de section héros. Le H1 sur une page de destination est souvent le seul élément de texte avec le budget de design le plus élevé. Le texte en dégradé lui donne du poids visuel sans recourir à un fichier de police personnalisé, un SVG ou une image de héros, qui ajoutent tous du poids à la page et des préoccupations d'accessibilité.
• Pages de métriques à grand nombre. Pages de tarification («$0 pour commencer»), encarts de statistiques («10× plus rapide») et résumés de tableau de bord utilisent du texte en dégradé pour attirer l'œil sur le nombre lui-même. Le dégradé remplace effectivement le motif «cercle coloré derrière le nombre» des designs plus anciens.
• Boutons d'appel à l'action. Un dégradé subtil sur le texte CTA (plutôt que l'arrière-plan du bouton) semble plus raffiné qu'une couleur unie et se marie bien avec une surface de bouton glassmorphique ou néomorphique. La technique est courante dans les marques de fintech et d'outils de design.
• Surlignages de navigation. Un état actif ou de survol sur un lien de navigation peut utiliser du texte en dégradé pour fournir un retour visuel sans ajouter de soulignement ou de changement de couleur d'arrière-plan. Ce motif est largement utilisé dans les sites de documentation (Stripe Docs, Tailwind Docs).
• Mode sombre et designs brand-bridge. Le texte en dégradé fonctionne particulièrement bien sur les arrière-plans sombres car les couleurs saturées ressortent sans rivaliser contre une surface claire chargée. De nombreux produits gardent des titres à couleur unie en mode clair et passent au dégradé en mode sombre (en utilisant un échange de variable CSS).
• Encarts de produits e-commerce. Les badges «Solde», «Nouveau», «Édition limitée» et les sous-titres de produits utilisent du texte en dégradé pour se différencier du corps de texte sans nécessiter d'actifs d'icônes. L'éditeur de vitrine de Shopify propose le texte en dégradé comme option intégrée en 2024.

Considérations d'accessibilité

• WCAG 2.1 SC 1.4.3 Contraste (Minimum). Le critère de succès exige au moins 4,5:1 de contraste entre le texte et l'arrière-plan pour le texte normal (3:1 pour le texte large, défini comme 18pt+ ou 14pt en gras). Le texte en dégradé est plus difficile à évaluer car le rapport de contraste varie à travers le dégradé. L'approche sûre : s'assurer que la couleur la plus claire de votre dégradé respecte toujours le ratio par rapport à l'arrière-plan. Des outils comme WebAIM Contrast Checker et Stark dans Figma peuvent aider.
• Choisissez d'abord la couleur la plus foncée du dégradé. Lors de l'association d'un dégradé avec un arrière-plan clair, choisir la couleur la plus claire du dégradé pour franchir le ratio 4,5:1 garantit que le reste du dégradé est également accessible. La même chose s'applique en sens inverse sur les arrière-plans sombres. WCAG 2.2 (recommandation octobre 2023) a resserré les directives sur la présentation visuelle, y compris le cas où le contraste du texte varie tout au long du passage.
• Les lecteurs d'écran voient le texte inchangé. Parce que le dégradé est purement un style visuel (background-clip, color), la technologie d'assistance lit le contenu textuel rendu indépendamment de la façon dont il est coloré. Il n'y a pas de souci de «texte alternatif» avec le texte en dégradé, contrairement au texte d'image rasterisé ou au SVG-texte-sans-élément-texte.
• prefers-reduced-motion. Les dégradés animés (transitions background-position, animations de cycle de couleur) doivent être enveloppés dans @media (prefers-reduced-motion: no-preference) afin que les utilisateurs souffrant de troubles vestibulaires ou de sensibilité au mouvement voient un dégradé statique. Le CSS Working Group a ajouté la requête média en 2017 ; la prise en charge par les navigateurs est universelle depuis 2020.
• Zoom du navigateur et redimensionnement du texte. WCAG 2.1 SC 1.4.4 exige que le texte soit redimensionnable jusqu'à 200 % sans perte de contenu. Le texte en dégradé évolue parfaitement parce qu'il est purement rendu en CSS (aucune rasterisation). Les utilisateurs à faible vision qui utilisent le zoom Ctrl+/Cmd+ verront le dégradé rester net à tout niveau de zoom.
• Feuilles de style d'impression. La plupart des navigateurs abandonnent les couleurs coupées à l'arrière-plan à l'impression car la page imprimée attend de l'encre sur papier, et les arrière-plans dégradés disparaissent. Fournissez toujours une substitution @media print qui définit une color solide sur le texte en dégradé afin que les copies imprimées restent lisibles. De nombreux designers oublient cela ; l'impression d'un titre en dégradé produit souvent un texte invisible.
• Chaîne de couleur de repli. Définissez toujours d'abord une propriété color solide, puis ajoutez color: transparent (ou -webkit-text-fill-color: transparent) afin que les navigateurs sans prise en charge de background-clip: text (IE hérités, très anciens navigateurs Android) voient toujours du texte en couleur unie plutôt que du texte invisible. La sortie du générateur inclut ce repli par défaut.

Questions fréquentes supplémentaires

Pourquoi le texte en dégradé est-il considéré comme une signature de marque moderne ?

Deux raisons. Premièrement, la raison technique : le texte en dégradé n'est devenu pleinement compatible entre navigateurs que vers 2017-2020, donc les designs qui l'utilisent portent visiblement l'indice «construit récemment», de la même façon que le flat design disait «2013» ou que le skeuomorphisme disait «2010». Deuxièmement, la raison culturelle : Stripe, Linear, Vercel et Apple WWDC ont popularisé le texte en dégradé comme élément d'identité de marque dans la vague 2020-2024 du marketing fintech et d'outils pour développeurs. Adopter le même langage visuel signale l'appartenance à cette lignée de design.

Comment animer un effet de texte en dégradé ?

La technique la plus courante anime background-position sur un dégradé surdimensionné. Définissez background-size: 200% 200% et animez background-position de 0% 0% à 100% 100% sur une boucle de 3-5 secondes. Enveloppez toujours les keyframes dans @media (prefers-reduced-motion: no-preference) afin que les utilisateurs sensibles au mouvement voient la version statique. Évitez d'animer directement les stops de couleur individuels : CSS n'interpole actuellement pas entre les valeurs de dégradé de manière fluide entre les navigateurs, bien que CSS @property (Recommandation candidate W3C 2022) commence à le permettre.

Les moteurs de recherche et les lecteurs d'écran peuvent-ils voir le texte en dégradé ?

Oui. Le texte en dégradé est du texte HTML pur stylisé avec CSS ; le DOM contient toujours les caractères réels. Google, Bing, les lecteurs d'écran (NVDA, JAWS, VoiceOver) et tout outil d'extraction de texte lisent le contenu exactement comme s'il s'agissait de texte ordinaire à couleur unie. C'est l'une des principales raisons pour lesquelles le texte CSS en dégradé a remplacé l'ancien motif «PNG d'un titre stylisé» : ces images étaient invisibles à la recherche et aux lecteurs d'écran sans texte alternatif manuel.

Le texte en dégradé fonctionne-t-il dans les e-mails HTML ?

La plupart du temps non. Outlook desktop (moteur de rendu Word) supprime background-clip ; le client web Gmail le prend en charge de manière incohérente ; Apple Mail et les clients Gmail mobiles modernes le rendent généralement correctement. Pour les campagnes par e-mail, l'approche la plus sûre est de livrer un titre à couleur unie de repli et de traiter le texte en dégradé comme une «amélioration progressive» pour les clients qui le prennent en charge. Certaines équipes pré-composent le titre en PNG/SVG avec texte alternatif et acceptent le compromis d'accessibilité.

Quelles couleurs fonctionnent le mieux ensemble dans un dégradé de texte ?

Trois motifs dominent. Analogues (couleurs côte à côte sur la roue, par ex. bleu → violet → rose) donne des résultats lisses, adaptés à la marque, et est la valeur par défaut pour la plupart des systèmes de design modernes. Complémentaires (opposés sur la roue, par ex. bleu → orange) crée un contraste fort mais peut sembler criard dans un texte long. Teintes de marque (votre couleur de marque principale avec une variation subtile de luminosité/saturation) produit un effet sophistiqué qui se sent intégré plutôt que décoratif. Évitez de mélanger plus de trois couleurs dans un seul titre ; les dégradés complexes sont mieux réservés aux icônes et aux éléments graphiques.