Texte dégradé CSS Créez du texte avec un remplissage dégradé en utilisant les propriétés background-clip et text-fill-color de CSS.
Texte dégradé CSS
Créez du texte avec un remplissage dégradé en utilisant les propriétés background-clip et text-fill-color de CSS.
Définir les couleurs du dégradé
Choisissez deux ou trois couleurs pour le dégradé de texte et ajustez l'angle.
Personnaliser la typographie
Définissez la taille et le poids de la police pour répondre à vos besoins de conception.
Copier le CSS
Prévisualisez le texte dégradé et copiez le CSS avec les propriétés background-clip.
What Is Texte dégradé CSS?
L'outil de texte avec dégradé CSS crée du texte attrayant avec des remplissages de couleur dégradés. Au lieu d'une couleur de texte solide, cette technique applique un fond dégradé au texte en utilisant la propriété background-clip: text combinée à -webkit-text-fill-color: transparent. Cela rend le dégradé visible à travers les caractères du texte. Vous pouvez définir deux ou trois couleurs de dégradé, ajuster l'angle du dégradé et personnaliser la taille et le poids de la police. L'outil génère tout le CSS nécessaire, y compris les préfixes webkit pour une compatibilité maximale des navigateurs. Le texte dégradé est populaire pour les titres, les sections héroïques et les éléments de marque où vous souhaitez que la typographie se détache.
Why Use Texte dégradé CSS?
-
Support pour 2 ou 3 couleurs de dégradé
-
Angle de dégradé ajustable dans n'importe quelle direction
-
Contrôle de la taille et du poids de la police pour une fine-tuning de la typographie
-
Le CSS généré inclut tous les préfixes webkit nécessaires
Common Use Cases
Titres de héros
Créez des titres de section de héros accrocheurs avec des remplissages dégradés.
Typographie de marque
Appliquez les couleurs de dégradé de la marque aux éléments de texte clés pour l'identité visuelle.
Titres de fonctionnalités
Mettez en évidence les titres de fonctionnalités avec des effets de texte dégradé colorés.
Appels à l'action sur les pages de destination
Faites ressortir le texte d'appel à l'action avec des couleurs de dégradé vives.
Technical Guide
La technique du texte dégradé utilise trois propriétés CSS qui travaillent ensemble. Tout d'abord, background définit un dégradé linéaire sur l'élément de texte. Deuxièmement, -webkit-background-clip: text (et la propriété standard background-clip: text) découpe le fond pour n'afficher que le contenu du texte. Troisièmement, -webkit-text-fill-color: transparent (ou color: transparent) rend la couleur du texte transparente afin que le fond dégradé soit visible. Le dégradé peut utiliser n'importe quelle fonction de dégradé CSS, y compris linear-gradient, radial-gradient ou conic-gradient. Pour que l'effet fonctionne, l'élément de texte doit avoir display: inline ou inline-block. Les préfixes webkit sont nécessaires pour Safari et les anciennes versions de Chrome. Pour l'accessibilité, assurez-vous que les couleurs du dégradé offrent un contraste suffisant avec le fond. Les lecteurs d'écran liront toujours le texte normalement, indépendamment de l'effet visuel.
Tips & Best Practices
-
1Utilisez un texte gras et large pour obtenir l'effet de dégradé le plus impactant
-
2Choisissez des couleurs avec un bon contraste les unes par rapport aux autres
-
3Ajoutez une troisième couleur pour des effets plus complexes, similaires à ceux d'un arc-en-ciel
-
4Testez contre l'arrière-plan de votre page pour vous assurer de la lisibilité
Related Tools
Générateur de dégradés CSS
Créez des dégradés linéaires, radiaux et coniques CSS magnifiques avec plusieurs arrêts de couleur et contrôle d'angle.
🎨 CSS & Design
Générateur d'ombre de texte CSS
Créez des ombres de texte CSS avec des contrôles visuels pour le décalage, la netteté, la couleur et l'opacité.
🎨 CSS & Design
Générateur d'échelle typographique
Générer une échelle typographique modulaire avec une taille de base, un ratio et des unités personnalisables.
🎨 CSS & Design
Générateur de transitions CSS
Gérez les transitions CSS avec des propriétés, durées, effets d'assouplissement et effets au survol personnalisables.
🎨 CSS & DesignFrequently Asked Questions
Q Le texte dégradé fonctionne-t-il dans tous les navigateurs ?
Q Puis-je utiliser plus de deux couleurs ?
Q Le texte dégradé est-il accessible ?
Q Pourquoi mon texte dégradé s'affiche-t-il sous forme de couleur solide ?
Q Puis-je animer le texte dégradé ?
About This Tool
Texte dégradé CSS is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.