Comment générer un dégradé CSS avec deux couleurs

À quoi sert le générateur de dégradé CSS ?

Ce générateur prépare le texte CSS d’un dégradé à partir de deux valeurs de couleur et, selon le cas, d’un angle. Il propose les formes linéaire et radiale. Le résultat peut servir de point de départ pour une feuille de style ou pour une règle d’arrière-plan, à condition de relire les valeurs avant de les intégrer à votre projet.

L’outil est utile lorsque vous connaissez les deux couleurs à faire apparaître et que vous souhaitez obtenir rapidement la déclaration correspondante. Vous pouvez renseigner vos propres valeurs ou laisser certains champs vides afin d’utiliser les réglages prévus par défaut.

Procédure

1. Saisissez la première couleur dans le champ correspondant. Si aucune valeur n’est fournie, la couleur utilisée est #ff6b6b. Saisissez ensuite la deuxième couleur ; lorsqu’elle manque, la valeur appliquée est #4ecdc4.

2. Choisissez le type de dégradé. Le réglage initial est linear. Pour demander une forme radiale, choisissez la valeur radial. Cette sélection est importante, car les deux formes ne produisent pas le même texte CSS.

3. Pour un dégradé linéaire, renseignez l’angle souhaité. Si le champ reste vide, l’angle appliqué est de 45 degrés. Une valeur numérique est transformée en nombre entier, puis ramenée par réduction modulo 360. Vous pouvez donc contrôler l’orientation sans devoir ramener vous-même une valeur supérieure à un tour complet.

4. Lancez la génération et récupérez le texte CSS retourné. Dans la forme linéaire, ce texte associe l’angle en degrés aux deux valeurs de couleur. Avec radial, il suit une forme radiale circulaire fondée sur ces deux valeurs.

5. Relisez le résultat avant de le copier dans votre feuille de style. Comparez les deux couleurs avec celles de votre maquette, vérifiez l’angle choisi pour un dégradé linéaire et confirmez que le type sélectionné correspond à la forme attendue. Cette vérification est particulièrement utile si vous avez laissé un champ vide ou utilisé une valeur inhabituelle.

Lire et contrôler le résultat

Le résultat est un texte CSS de dégradé, et non une validation de votre palette. Pour une forme linéaire, l’angle fourni est converti en entier puis réduit modulo 360. Une conversion impossible fait revenir l’angle à 45 degrés. Une valeur comme 480 peut ainsi aboutir à une orientation équivalente à celle de 120 degrés, tandis qu’une valeur non convertible reprend le réglage de secours.

La valeur radial déclenche la forme radiale circulaire. Une valeur différente de linear ou radial ne crée pas une troisième forme : elle reprend le format linéaire. La valeur de type fournie peut néanmoins rester présente dans les données retournées. Si le type saisi ne correspond pas à l’option attendue, contrôlez donc le texte produit au lieu de supposer qu’une forme personnalisée a été générée.

Les valeurs de couleur sont insérées dans le texte CSS sans étape distincte de validation. Le générateur ne confirme donc pas qu’une saisie constitue une couleur CSS exploitable. Une valeur mal orthographiée, incomplète ou adaptée à un autre contexte peut être recopiée telle quelle dans le résultat. La relecture de la syntaxe et un contrôle dans votre propre feuille de style restent nécessaires avant l’utilisation.

Exemple pratique

Vous préparez une bannière dont le fond doit passer de #336699 à #f2c94c selon une orientation de 120 degrés.

Pour une bannière, saisissez #336699 comme première couleur, #f2c94c comme deuxième couleur, choisissez linear et indiquez 120 degrés, puis générez le résultat.

Le résultat prend la forme d’un texte CSS de dégradé linéaire contenant un angle de 120 degrés et les deux valeurs #336699 et #f2c94c.

Limites

• Les couleurs ne sont pas soumises à une validation distincte, et un type autre que linear ou radial ne déclenche pas une forme dédiée.

Erreurs fréquentes

• Une couleur saisie avec une faute ou une syntaxe inadaptée est insérée sans validation distincte. Relisez les deux valeurs et contrôlez leur syntaxe CSS avant de réutiliser le texte produit.

Questions fréquentes

Comment obtenir un dégradé radial ?

Choisissez la valeur radial dans le réglage du type, puis générez le résultat. Cette valeur produit une forme radiale circulaire fondée sur les deux couleurs fournies.

Que se passe-t-il si l’angle est vide ou incorrect ?

Lorsque l’angle est vide, la valeur appliquée est de 45 degrés. Si la conversion de la saisie échoue, l’outil revient aussi à 45 degrés ; une valeur convertible est transformée en entier puis réduite modulo 360.

Un type de dégradé personnalisé produit-il une forme distincte ?

Une valeur différente de linear ou radial reprend le format linéaire. Elle ne déclenche pas une forme distincte, même si la valeur de type saisie peut rester présente dans les données retournées.