Générateur de dégradé

Avec Générateur de dégradé, les designers et intégrateurs web peuvent ajuster une interface avant son intégration. Créez un dégradé linéaire CSS.

Créez un dégradé linéaire CSS. Vous pouvez l’utiliser gratuitement dans votre navigateur, sans créer de compte, puis vérifier le résultat avant de poursuivre.

Mode d’emploi

Saisissez d'abord l'angle du dégradé en degrés : il fixe la direction dans laquelle les couleurs se succèdent.
Indiquez ensuite la couleur de départ sur la ligne suivante, puis la couleur d'arrivée en dessous.
Lancez la génération : le code du dégradé linéaire apparaît dans la zone de résultat, prêt à être copié.
Collez ce code dans la règle de votre choix, puis rechargez la page pour vérifier le rendu réel sur votre écran.
Modifiez l'angle ou une couleur et relancez la génération autant de fois que nécessaire avant de figer le style.

Exemple

L'exemple fourni utilise un angle de 45 degrés avec un bleu très sombre au départ et un vert franc à l'arrivée. Après génération, comparez la ligne obtenue avec ce que vous attendiez : l'angle commande la direction, l'ordre des couleurs décide de la teinte aux deux extrémités.

Entrée

45
#0F172A
#16A34A

Résultat

background: linear-gradient(45deg, #0F172A, #16A34A);

Limites et formats

Seuls les dégradés linéaires sont produits ici ; les dégradés radiaux, coniques ou répétés demandent une autre syntaxe.
Deux couleurs suffisent pour un dégradé simple, mais les arrêts intermédiaires ne se règlent pas depuis cette page.
Le rendu dépend de l'écran et du navigateur du visiteur, un dégradé très contrasté peut fatiguer la lecture d'un texte posé dessus.
Vérifiez le contraste si vous écrivez du texte par-dessus le dégradé, la lisibilité ne se devine pas depuis le code seul.

Où le traitement a lieu

La génération a lieu dans votre navigateur : l'angle et les couleurs restent sur votre appareil, rien n'est envoyé et rien n'est conservé lorsque vous quittez la page. Le code produit est donc construit entièrement chez vous.

Questions fréquentes

Puis-je réutiliser le code obtenu dans une autre règle CSS ?

Oui, la ligne produite reprend la syntaxe d'un dégradé linéaire et s'insère dans n'importe quelle déclaration de fond. Copiez-la telle quelle et adaptez seulement les couleurs si vous changez de palette plus tard.

Comment obtenir un dégradé qui part du haut vers le bas ?

Faites varier l'angle par petits pas et gardez la valeur qui place votre première couleur en haut de l'élément. Comme le rendu se vérifie en rechargeant la page, un ou deux essais suffisent généralement pour tomber sur la direction voulue.

Puis-je utiliser plus de deux couleurs ?

Cette page part d'une couleur de départ et d'une couleur d'arrivée, donc un dégradé à trois teintes ne se règle pas directement ici. Vous pouvez toutefois générer une première paire, puis ajouter à la main les arrêts supplémentaires dans votre code.