Générateur de dégradés CSS

À propos des dégradés CSS

Un dégradé CSS est une interpolation lisse entre deux couleurs ou plus, peinte directement par le navigateur — sans image. Les dégradés linéaires balayent le long d'une droite à l'angle choisi ; les dégradés radiaux rayonnent depuis un centre vers l'extérieur. Chaque palier de couleur a une position de 0 % à 100 % le long de la ligne du dégradé. Les navigateurs mélangent tout en sRGB par défaut, donc plus le contraste est fort entre paliers adjacents, plus la bande de tons mélangés est visible.

Comment utiliser ce générateur

Choisissez un type de dégradé, puis pour le linéaire ajustez l'angle (0° pointe vers le haut, 90° vers la droite, 180° vers le bas). Chaque ligne dans Paliers de couleur a un sélecteur de couleur et une position — faites glisser le curseur, tapez un pourcentage, ou cliquez sur Ajouter un palier pour insérer une nouvelle couleur. Appliquez un Préréglage si vous voulez juste un point de départ rapide. La zone CSS sous l'aperçu affiche la déclaration background exacte ; cliquez sur Copier et collez dans votre feuille de style.

Conseils de design

Les dégradés à deux paliers entre couleurs analogues (proches sur la roue chromatique) paraissent calmes et modernes. Les dégradés à trois paliers avec un accent au milieu peuvent paraître riches mais virer facilement au boueux — gardez la saturation similaire entre les paliers. Pour les fonds d'interface sombre, associez un quasi-noir à une teinte sombre à très faible contraste (5 à 10 % d'écart de luminosité) pour que le dégradé se ressente plutôt qu'il ne se voie. Testez toujours votre dégradé avec le contenu réel posé dessus — le texte a besoin d'au moins 4,5:1 de contraste contre toute zone du dégradé qu'il chevauche.

Questions fréquentes

Combien de paliers de couleur puis-je ajouter ?

Cet outil plafonne à cinq paliers, ce qui couvre quasi tous les dégradés d'interface que vous embarquerez. CSS en lui-même n'impose pas de limite, mais au-delà de 4 ou 5 paliers, on perd plus en confusion qu'on ne gagne en finesse. S'il vous faut des transitions photographiques, envisagez un mesh SVG ou une vraie image.

Pourquoi mon dégradé linéaire est-il différent de celui d'un autre outil ?

Différents outils interprètent parfois l'angle différemment — la spec CSS prend 0° vers le haut, 90° vers la droite, mais l'ancienne syntaxe Webkit utilisait une autre référence. La sortie ici utilise la forme moderne linear-gradient(deg, ...), qui fonctionne dans tous les navigateurs actuels sans préfixes.

Puis-je l'utiliser pour le mode sombre ?

Oui — associez le dégradé à @media (prefers-color-scheme: dark) dans votre CSS et choisissez un jeu de paliers plus sombre. Vous pouvez aussi enrober la déclaration de dégradé dans des variables CSS et changer les valeurs par thème, ce qui laisse le reste de votre CSS intact.

Les dégradés nuisent-ils aux performances ?

Sur du matériel moderne, non — ils sont peints sur le GPU comme tout autre fond. Là où un coût peut se voir, c'est sur d'énormes dégradés radiaux plein écran animés à 60 fps, ou sur du mobile très ancien. Pour le fond d'un panneau statique, le coût est négligeable.

Puis-je animer un dégradé ?

CSS n'anime pas background-image directement, mais vous pouvez animer background-position sur un dégradé surdimensionné, ou utiliser @property avec des propriétés personnalisées pour interpoler les couleurs des paliers. Dans tous les cas, prévoyez un fallback prefers-reduced-motion pour ceux qui le demandent.

Les dégradés radiaux sont-ils supportés partout ?

Oui. linear-gradient() et radial-gradient() sont en production dans tous les navigateurs majeurs depuis plus d'une décennie. La sortie ici utilise la forme standard (sans préfixes vendeur) et fonctionne jusqu'aux premiers navigateurs evergreen.

Générateur de dégradés CSS