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

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.

A L'aperçu ici utilise un fond simple, mais votre projet peut avoir d'autres règles CSS qui entrent en conflit. Vérifiez si une background-color est définie ailleurs, ou si un reset CSS supprime background-image. L'angle est aussi relatif à la boîte de l'élément : un angle de 45 degrés sur un bouton étroit ne rendra pas comme sur une grande bannière. Copiez le code dans un fichier de test isolé sans autres styles. Vous identifierez le problème en moins de cinq minutes.

A Le générateur produit du code CSS, mais vos logiciels de design acceptent ces mêmes valeurs hexadécimales. Copiez simplement les codes couleur depuis l'interface et collez-les dans les outils de remplissage de Figma. Cette méthode rapide permet de valider une maquette avant de toucher au code source. Attention toutefois, le rendu des angles varie parfois entre les navigateurs et les logiciels graphiques.

A Ajouter plus de quatre arrêts de couleur alourdit légèrement votre fichier CSS, mais les navigateurs affichent les dégradés sans charger d'images supplémentaires. Cela reste bien plus rapide que d'importer un fond PNG de 500 Ko. Limitez-vous à trois arrêts pour garder un code propre.