# Appliquer un dégradé de couleurs à un texte dans Webflow Tutoriel3 minPublié le Mar 30, 2022Dernière mise à jour le ![Text avec un gradient de couleur](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/67123d29c54a078bdac53f40_64760069e93084646c9ef1a3_62446076e233991beeaa5bcb_Open-Graph-webflow-tuto-text-gradient.png)Sommaire [ Copied](#)[ ](#)[ ](#)[ ](#) - [H2 Example](#) Résumez cet article avec une IA[ ChatGPT](#)[ Claude](#)[ Grok](#)[ Perplexity](#)[ Google AI](#)Points clés de l'articleWebflow est un véritable outil de développement web sans code. C’est l’éditeur de code CSS et HTML parfait si vous souhaitez développer un site web unique. [Webflow ](/fr/webflow)possède tout un panneau destiné à la personnalisation de vos éléments grâce au Style Manager. C’est grâce aux fonctionnalités de celui-ci que vous pouvez réaliser l’UI de vos pages, c’est là que le CSS s’écrit. Dans tuto du jour, nous allons apprendre à **ajouter un dégradé de couleurs à vos textes dans le Designer de Webflow**. ## Etape 1 : Accéder à son projet Webflow Dans cette étape, nous nous rendons directement dans notre** projet Webflow** et dans la section qui nous intéresse (celle où l’on souhaite appliquer un dégradé à notre texte). ## Etape 2 : Créer une classe pour le dégradé de couleurs Nous venons maintenant **sélectionner le texte** à qui nous voulons appliquer notre dégradé de couleurs. Nous allons lui **ajouter une classe** que nous nommerons dans notre exemple : “text-gradient-purple”. PS : Si vous suivez la méthode [Client-First de Finswee](/fr/tools/client-first)t, nous vous conseillons de créer votre classe directement dans le Style Guide puis de l’appliquer aux éléments qui vous intéressent. ![Création de la classe text-gradient-purple dans webflow](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/67123d2ac54a078bdac53f59_64760069e93084646c9eee43_62441a39b73585154bf57eae_Classe-text-gradient-webflow.png) ## Etape 3 : Styliser la classe avec le gradient Une fois que nous avons créé notre classe, nous allons pouvoir lui ajouter différents types de style (code CSS). Dans notre cas, nous allons nous rendre dans la section “Backgrounds”. Dans cette section, il y a trois paramètres : image & gradient, color et clipping. Dans notre première manipulation nous allons pouvoir ajouter notre dégradé de couleurs dans “**image & gradient**”. Lorsque vous cliquez sur le “+”, vous accédez à différentes options. Vous pouvez insérer une image en fond, un gradient linaire, un gradient radial ou un overlay. Lors de cette étape, vous êtes libre, faîtes place à votre créativité et personnaliser votre dégradé comme bon vous semble. ![Gradient linéaire dans Webflow](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/67123d2ac54a078bdac53f4f_64760069e93084646c9eee4a_62441a44798f806b2696a7ca_Background-gradient-lineaire-webflow.png) Ensuite, dans “**clipping**” il faut sélectionner “**clip background to text**”. Cela va permettre à ce que votre arrière-plan ne s’applique qu’à votre texte. Votre dégradé de couleurs ne s’applique plus qu’à votre texte. ![Clip to Text dans Webflow : Dégradé de couleurs à un texte](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/67123d2ac54a078bdac53f53_64760069e93084646c9eee49_62441a514787a956745fb2ee_Background-clip-to-text-webflow.png) ## Etape 4 : Appliquer la classe plusieurs fois Si vous souhaitez appliquer le même gradient à plusieurs textes, il ne vous suffit plus qu’à **ajouter la classe** que vous avez précédemment créée à chacun d’entre eux. ![Ajout de la classe text-gradient-purple à différents textes dans Webflow](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/67123d2ac54a078bdac53f56_64760069e93084646c9eee48_62441a66a696061b61d0ce37_Ajouter-degrade-couleur-texte-webflow.png) **Le tutoriel en Vidéo :** Voilà, vous savez maintenant **appliquer un dégradé de couleurs à vos textes dans Webflow**. Pour comprendre les différentes fonctionnalités de style de Webflow vous pouvez lire notre article sur le [Style Manager](/fr/blog/apprendre-designer-webflow-style). Vous pouvez également faire appel à notre agence Webflow pour vos besoins web. [ ](#)![Thibaut Legrand](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/678a47ec4cabceb0d6aa7c2e_thibaut-website%20(1).webp)Thibaut LegrandCo-fondateur de Vydera & Technical Solutions Architect[ ](/fr/team/thibaut-legrand)[ ](https://www.linkedin.com/in/thibaut-legrand-digidop/)[ ](https://twitter.com/lgd_thibaut)+1200 lecteurs ## Restez informé(e) Abonnez-vous à notre newsletter pour des conseils et actus exclusives. [S'inscrire ](https://digidopfr.substack.com/subscribe)![Preview Digidop Newsletter](https://cdn.prod.website-files.com/6705382c85d21c496de94fa5/671231c436687e9d40d995e9_newsletter-digidop.webp)[Prévisualiser la Newsletter ](https://digidopfr.substack.com/) ## Articles qui devraient vous intéresser ![Collage of homepages from B2B SaaS agencies including Digidop, Vydera, FlowNinja, OFF+BRAND, Yuri & Neil, MetaLab, Shakuro and Ramotion](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6ab92cc629d6018592f49d92_Best%20B2B%20SaaS%20Agencies%20in%202026_FR.webp)DocumentationTout voir ### Top 20 meilleures agences web et digitales pour SaaS B2B en 2026 [Top 20 meilleures agences web et digitales pour SaaS B2B en 2026](/fr/blog/top-agences-b2b-saas)Top 20 meilleures agences web et digitales pour SaaS B2B en 2026![Interface Webflow Source montrant les agents IA, l’édition de site et les Views par métier dans un espace de travail unifié.](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6a9fa9f8608ffcc774c47eb7_source%20(1).webp)NewsDéveloppementTout voir ### Webflow lance Source. Notre avis sur ce shift. [Webflow lance Source. Notre avis sur ce shift.](/fr/blog/webflow-lance-source)Webflow lance Source. Notre avis sur ce shift.![Taux de citation par plateforme IA : ChatGPT 100 %, Perplexity 100 %, Gemini 67 % et Claude 0 %.](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6a9044c13914f1d6ac3e9161_citation.jpg)DocumentationIATout voir ### Comment rendre son site visible dans ChatGPT, Perplexity et les moteurs IA [Comment rendre son site visible dans ChatGPT, Perplexity et les moteurs IA](/fr/blog/comment-rendre-son-site-visible-chatgpt-perplexity-et-moteurs-ia)Comment rendre son site visible dans ChatGPT, Perplexity et les moteurs IA[Voir tous les articles ](/fr/blog)Les meilleurs projets web commencent par une conversation[Discuter avec un expert ](/fr/contact)[Réserver un appel ](/fr/calendly)![Abstract composition of black and gold metallic ribbons with elegant light reflections and smooth gradients. A premium background conveying luxury, modernity, and innovation.](https://cdn.prod.website-files.com/6705382c85d21c496de94fa5/6a69a346549deffabdf98afa_shape-cta-footer.webp)