CSS Gradient Générateur
Mélangez deux couleurs dans un dégradé linéaire CSS et copiez le code.
background: linear-gradient(90deg, #6366f1, #a855f7);
Ce générateur crée un dégradé linéaire CSSbicolore et l'affiche en direct lorsque vous l'ajustez. Choisissez une couleur de début et de fin, faites glisser le curseur d'angle, et la zone d'aperçu et la ligne de code se mettent à jour ensemble à chaque modification. Lorsque cela semble correct, appuyez surCopier CSSpour récupérer une déclarationd'arrière-planprête à coller. Tout s'exécute dans votre navigateur : il n'y a rien à télécharger et aucun fichier image n'est produit, juste le texte CSS que vous déposez directement dans une feuille de style.
Deux arrêts de couleur et un angle
Les deux échantillons définissentau début deetà la fin dedu dégradé — ils sont par défaut indigo#6366f1et violet#a855f7. Le mélange s'étend toujours directement de la première couleur à la seconde, sans arrêt intermédiaire, vous obtenez donc un fondu bicolore propre plutôt qu'une rampe à plusieurs arrêts. Le curseurAngle de rotationcouvre 0 à 360°, suivant la convention CSS où0degpointe le dégradé vers le haut,90deg(la valeur par défaut) s'exécute de gauche à droite et180degs'exécute de haut en bas. Le badge à côté du curseur indique l'angle actuel, et ce numéro est écrit directement dans leLinear-gradient()généré.
Préréglages et code copié
Trois préréglages vous donnent un point de départ en un clic :Ocean(bleu#3b82f6au vert#10b981),Sunset(rose#f43f5eà orange#fb923c) etCandy(violet#8b5cf6à rose#ec4899). Un préréglage charge simplement ses deux couleurs dans les échantillons, de sorte que vous pouvez toujours modifier l'angle ou affiner l'une ou l'autre couleur par la suite. La sortie se lit comme un arrière-plan: linéaire-gradient(90deg, #6366f1, #a855f7);— une déclaration unique se terminant par un point-virgule. Puisqu’il s’agit d’une valeurd’arrière-planstandard, la même chaîne fonctionne également en ligne dans un attributde style.
Ce que l'aperçu fait et ne montre pas
Le volet d'aperçu applique exactement le CSS que vous êtes sur le point de copier, de sorte que les couleurs et la direction que vous voyez sont fidèles. Ce qu'il ne peut pas prédire, c'est la forme de l'élément dans lequel vous collez : un dégradé angulaire semble différent sur une large bannière que sur une barre latérale haute et étroite, car l'angle est mesuré par rapport à la propre boîte de cet élément. Si vous envisagez de superposer du texte sur le résultat, vérifiez le contraste par rapport aux deux extrémités du mélange : un dégradé qui se lit bien sur son extrémité claire peut avaler le même texte sur son extrémité sombre.
Foire Aux Questions
Puis-je ajouter une troisième couleur ou des arrêts supplémentaires ?
Pas à partir des commandes : cela crée un mélange à deux niveaux, de la couleur de départ à la couleur de fin. Pour ajouter des arrêts intermédiaires, vous pouvez modifier manuellement le Linear-gradient() copié, en insérant des couleurs supplémentaires entre les deux.
Que signifie réellement le numéro d’angle ?
Il s'agit de l'angle de dégradé CSS : 0 deg envoie le mélange vers le haut, 90 deg (valeur par défaut) vers la droite et 180 deg vers le bas. Le curseur s'étend sur toute la plage de 0 à 360°.
Est-ce qu'il fait aussi des dégradés radiaux ou coniques ?
Non. Cet outil génère uniquement un gradient linéaire(). Les dégradés radiaux et coniques utilisent une syntaxe CSS différente et ne sont pas générés ici.
Où puis-je coller le code copié ?
Dans la propriété background de n'importe quelle règle CSS, ou en ligne dans un attribut de style. Il s'agit d'une déclaration complète se terminant par un point-virgule, aucune modification supplémentaire n'est donc nécessaire pour l'utiliser.