Générateur de Dégradé CSS : Créer de beaux dégradés | Gratuit

A Pour concevoir un dégradé CSS multicolore, cliquez simplement sur le bouton "Ajouter une couleur" ou un indicateur similaire, généralement situé entre ou à côté des sélecteurs de couleurs existants. Cela introduira un point d'arrêt de couleur supplémentaire. Vous pourrez ensuite sélectionner une nouvelle couleur hexadécimale personnalisée pour ce point et ajuster sa position le long de la barre de dégradé afin d'obtenir une transition douce ou abrupte avec le mélange désiré de plusieurs couleurs.

A Les dégradés linéaires s'écoulent en ligne droite, horizontalement, verticalement ou en diagonale. Vous contrôlez la direction avec le curseur d'angle, par exemple en le réglant sur 90 degrés pour un fondu vertical. Les dégradés radiaux s'étendent vers l'extérieur à partir d'un point central, créant un effet circulaire ou elliptique. Vous ne pouvez pas contrôler directement la forme au-delà du cercle avec cet outil, mais vous pouvez choisir l'emplacement du centre.

A L'outil génère du CSS standard compatible avec Chrome, Firefox, Safari et Edge. Internet Explorer 9 et versions antérieures n'affichent pas les dégradés – cela représente moins de 1% du trafic mondial aujourd'hui. Pour les anciens navigateurs, ajoutez une couleur d'arrière-plan unie avant la propriété dégradée dans votre CSS. Ainsi, les utilisateurs verront une couleur plate si les dégradés ne sont pas pris en charge. Test rapide : collez votre code dans les outils de développement d'un navigateur moderne.

A Les bandes apparaissent quand la transition couleur semble striée au lieu d'être lisse. Cela arrive quand votre dégradé couvre trop de pixels sans assez d'arrêts de couleur. Pour une section hero pleine largeur, ajoutez un troisième arrêt de couleur à mi-chemin entre vos deux couleurs principales. Sur les grands fonds (1920px+), essayez background-attachment: fixed pour réduire l'effet de banding. Le générateur produit un code propre, mais les navigateurs limitent le rendu. Astuce rapide : choisissez des couleurs de luminosité proche pour adoucir la transition.

A Votre dégradé respecte les réglages système de contraste élevé, mais l'outil ne les simule pas. Les problèmes de contraste surviennent quand deux couleurs ont une luminosité similaire — comme un jaune pastel à côté d'un rose pâle. Vérification rapide: convertissez les deux codes hexadécimaux en HSL et assurez-vous que leurs valeurs L diffèrent d'au moins 30 points. Pour les sections hero, testez votre dégradé en mode contraste élevé Windows ou avec une extension comme Axe. Les 12 préréglages ont été choisis pour l'accessibilité, mais les couleurs personnalisées dépendent de vous.

A Pas de fonctionnalité de sauvegarde pour l'instant. La solution : copiez le CSS obtenu dans un fichier texte, un snippet CodePen ou le panneau snippets des outils développeur. Les web designers que je connais gardent un fichier « gradients.css » dans leurs projets avec 5 à 10 favoris prêts à coller. Ça prend 10 secondes à mettre en place, et ça évite de tout refaire à chaque fois.

A Oui, mais l'outil ne génère pas le code d'animation pour vous. Il produit une propriété background-image statique. Pour animer, insérez-la dans une règle @keyframes qui modifie background-position ou les arrêts de couleur. Astuce courante : multipliez la largeur du fond dégradé par 3 par rapport à l'élément, puis animez background-position de 0 à 100%. Vous obtenez une vague de couleur fluide, parfaite pour un spinner de chargement ou une section héros.

A Bougez le curseur d'angle à 90 degrés, le dégradé passe de gauche à droite à haut en bas. 180 degrés l'inverse complètement. Pour un effet diagonal, essayez 45 ou 135 degrés – très courants sur les sections hero. L'aperçu se met à jour en temps réel, vous voyez le changement immédiatement. Pas besoin de toucher aux palettes de couleur sauf si vous voulez rééquilibrer.

A Non, l'outil ne génère que du code CSS. Pour vos maquettes, faites une capture d'écran de l'aperçu ou copiez les valeurs hexadécimales dans votre logiciel de design. Figma et Sketch acceptent les dégradés CSS directement. Si vous avez besoin d'une image matricielle, réglez l'angle sur 180 degrés, puis capturez l'écran à 200% de zoom. Vous obtenez un asset net en 2x pour vos interfaces. Les couleurs correspondent exactement entre navigateur et logiciel, donc votre maquette reste fidèle.

A Non, l'outil génère uniquement la déclaration complète background-image. Mais vous pouvez la raccourcir manuellement : prenez le contenu des parenthèses après linear-gradient et collez-le dans `background: linear-gradient(...)`. Ça retire environ 30 caractères par règle. Pour des maquettes rapides, certains copient le bloc entier dans un convertisseur CSS vers JSON. Astuce : gardez la version complète, elle est plus lisible et plus facile à déboguer. La forme courte économise des octets, la longue économise du temps.