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

A Choisissez les couleurs, le type, l'angle et copiez le CSS.

A Oui.

A Pour garantir que vos dégradés CSS s'alignent parfaitement avec l'identité visuelle de votre marque, utilisez les champs de saisie de couleurs personnalisées. Il suffit de coller vos codes hexadécimaux de marque spécifiques (par exemple, #RRGGBB) dans les sélecteurs de couleurs. Cela vous permet de générer des dégradés avec vos couleurs de marque exactes, maintenant une cohérence sur tous vos éléments web. Ajustez l'angle et ajoutez plus d'arrêts de couleur si nécessaire pour obtenir l'effet désiré.

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.