Les résultats sont fournis à titre informatif uniquement et peuvent contenir des erreurs. Vérifiez les informations importantes de manière indépendante. L'utilisation de cet outil se fait à vos propres risques.
Ce que fait cet outil
Le générateur de dégradé CSS construit une déclaration background à partir de deux couleurs. Choisissez Linéaire pour un fondu le long d'une ligne, selon l'angle de votre choix, ou Radial pour un dégradé circulaire qui part du centre vers l'extérieur. L'aperçu se met à jour à mesure que vous ajustez les réglages, et la zone de résultat contient une ligne prête à coller, comme background: linear-gradient(90deg, #3b82f6, #8b5cf6);.
Dans un dégradé linéaire, l'angle fixe la direction : 0deg va de bas en haut, 90deg de gauche à droite et 180deg de haut en bas. Un dégradé radial ignore l'angle et utilise circle, si bien que la première couleur se trouve au centre. Les deux formes sont prises en charge par tous les navigateurs actuels sans préfixe propriétaire : la ligne générée fonctionne telle quelle.
Quand l'utiliser
- Donner à une section hero ou à un bouton d'appel à l'action un fond discret en deux tons.
- Remplacer une image de fond en dégradé par du CSS, pour que la page charge un fichier de moins.
- Essayer côte à côte des paires de couleurs de marque avant de les intégrer à un design system.
- Créer un halo radial doux derrière un logo ou une illustration.
Exemple concret
Entrée
Type : linéaire
Angle : 90
Couleurs : #3b82f6, #8b5cf6Sortie
background: linear-gradient(90deg, #3b82f6, #8b5cf6);Questions sur cet outil
Comment ajouter une troisième couleur ?
Ajoutez-la à la liste à l'intérieur de la fonction, séparée par une virgule : linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899). Vous pouvez aussi donner une position à chaque couleur, comme #8b5cf6 40%, pour contrôler l'endroit où se fait la transition.
Le texte restera-t-il lisible sur un dégradé ?
Vérifiez la couleur du texte par rapport aux deux extrémités du dégradé avec le Vérificateur de Contraste de Couleur. Si l'une d'elles échoue, assombrissez-la ou ajoutez un calque semi-transparent derrière le texte.
Puis-je utiliser un dégradé pour une bordure ou pour remplir du texte ?
Oui, avec un peu de CSS en plus. Pour du texte, définissez le dégradé comme background, puis ajoutez background-clip: text et color: transparent. Pour les bordures, border-image accepte la même fonction de dégradé.
Pourquoi mon dégradé présente-t-il des bandes visibles ?
Des bandes apparaissent lorsque deux couleurs proches sont étirées sur une grande surface. Choisissez des couleurs plus éloignées, réduisez la surface ou ajoutez un arrêt intermédiaire pour que chaque palier soit plus petit.
Cet outil est-il gratuit ?
Oui, il est gratuit. Sans inscription ni e-mail. Résultats directement sur cette page.
Comment obtenir mon résultat ?
Utilisez cet outil sur cette page. Le résultat apparaît ici, sans envoi par e-mail.