Générateur de Dégradés

Générateur de Dégradés CSS - Créer de Beaux Dégradés

Un puissant générateur de dégradés CSS qui crée des dégradés linéaires et radiaux avec plusieurs couleurs. Dispose d'aperçu en direct, directions et positions personnalisables, dégradés préréglés et exporte du code CSS prêt à l'emploi. Parfait pour designers web et développeurs créant des designs web modernes. Voir aussi notre Palette de Couleurs et notre Vérificateur Contraste.

Comment créer un dégradé CSS pour une section hero ?

Commencez avec deux couleurs liées — les teintes analogues sont les plus sûres car elles se mélangent sans produire de tons moyens boueux. Placez-les dans les deux premiers arrêts de couleur et réglez l'angle à 135deg, qui se lit comme une lumière naturelle venant du coin supérieur gauche et est la direction de dégradé la plus populaire en hero design moderne. Prévisualisez puis copiez la règle CSS générée (par exemple background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);) et collez-la dans le conteneur hero de votre feuille de style. Pour la lisibilité du texte, superposez une couche semi-transparente sombre entre le dégradé et le texte à l'aide d'un second background-image avec linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)) au-dessus du dégradé coloré. C'est l'astuce que presque toute landing page moderne utilise.

Quelle est la différence entre dégradés linéaires et radiaux ?

Un dégradé linéaire fait transitionner les couleurs le long d'un axe droit défini par un angle (0deg est de bas en haut, 90deg de gauche à droite, 180deg de haut en bas, 270deg de droite à gauche). C'est le bon choix pour fonds pleine page, cartes, boutons, et partout où vous voulez un balayage directionnel. Un dégradé radial fait transitionner les couleurs depuis un point central vers l'extérieur en cercles ou ellipses concentriques ; vous pouvez positionner le centre n'importe où (radial-gradient(circle at top right, #A, #B)). C'est le bon choix pour effets de projecteur, sphères lumineuses, états hover de bouton et fonds abstraits. Les linéaires sont de loin les plus courants en UI de production ; les radiaux paraissent plus décoratifs et s'utilisent avec parcimonie.

Que sont les arrêts de couleur et comment fonctionnent les pourcentages ?

Un arrêt de couleur est une paire (couleur, position) qui indique au navigateur exactement où sur l'axe du dégradé cette couleur doit apparaître à pleine intensité. Les positions sont des pourcentages de 0 % (début de l'axe) à 100 % (fin). Sans positions, le navigateur distribue les arrêts uniformément : deux couleurs à 0 % et 100 %, trois à 0 %, 50 %, 100 %, et ainsi de suite. Vous pouvez décaler n'importe quel arrêt pour biaiser le dégradé : linear-gradient(red 0%, yellow 20%, blue 100%) rend la transition rouge-jaune serrée et donne la majeure partie du canvas au mélange jaune-bleu. Placer deux arrêts à la même position crée un arrêt dur (pas de fondu, changement instantané de couleur), c'est ainsi que rayures, barres de progression segmentées et fonds en blocs de couleur sont construits.

Comment choisir le bon angle pour un dégradé ?

La convention d'angle CSS est de style horloge : 0deg pointe vers le haut, 90deg vers la droite, 180deg vers le bas, 270deg vers la gauche. 90deg (gauche à droite) convient aux barres de navigation et en-têtes de chronologie ; 180deg (haut en bas) est le dégradé par défaut style ciel ; 135deg (coin supérieur gauche au coin inférieur droit) est le cheval de bataille visuel — il se lit comme la lumière du jour naturelle et c'est ce que la plupart des apps modernes utilisent pour heros, tableaux de bord et fonds de cartes. Inversez un dégradé en ajoutant 180 à son angle, ou utilisez le bouton Inverser qui échange les arrêts. Évitez les angles comme 1deg ou 89deg sauf si vous voulez un effet presque-mais-pas-tout-à-fait horizontal ; la légère inclinaison ressemble généralement à un bug CSS plutôt qu'à un design intentionnel.

Puis-je créer des dégradés avec plus de deux couleurs de manière fluide ?

Oui, et ajouter une troisième couleur est le moyen le plus simple de faire paraître un dégradé premium plutôt que générique. L'astuce est de choisir trois couleurs déjà proches sur la roue chromatique — analogues (rouge, orange, jaune) ou une paire de marque plus un neutre apparenté. Placez-les à 0 %, 50 %, 100 % pour un mélange à trois voies uniforme, ou décalez l'arrêt central (0 %, 30 %, 100 %) pour de l'asymétrie. Évitez de sauter à travers la roue car le navigateur interpole à travers des teintes non liées et produit un gris boueux au point médian — un dégradé bleu-jaune passe par gris-vert à 50 %. Pour les effets arc-en-ciel, six ou sept arrêts sont nécessaires, mais ils se lisent généralement comme décoratifs plutôt que professionnels. Deux ou trois arrêts est le point idéal pour la plupart du travail UI.

Comment garder le texte lisible sur un fond en dégradé ?

Les dégradés changent de contraste sur leur longueur, donc une couleur de premier plan qui respecte WCAG 4.5:1 en haut peut échouer en bas. Quatre défenses : (1) superposez une couche plate semi-transparente sombre ou claire entre le dégradé et le texte avec un second background-image — linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)) garde un contraste uniforme ; (2) confinez le texte dans une boîte plate avec son propre fond (une carte au-dessus du hero) ; (3) ajoutez une ombre de texte subtile (text-shadow: 0 1px 3px rgba(0,0,0,0.4)) pour détacher les lettres des zones chargées ; (4) limitez la saturation du dégradé pour que l'arrêt le plus sombre reste assez sombre pour contraster avec du blanc dans le pire cas. Validez toujours le contraste de la pire position avec un vérificateur WCAG avant publication.

Quel est le coût de performance des dégradés CSS par rapport aux fonds image ?

Les dégradés CSS sont essentiellement gratuits comparés aux fonds image. Le navigateur les calcule au moment du paint avec des shaders GPU simples, la règle elle-même occupe quelques dizaines d'octets de texte au lieu de dizaines ou centaines de kilooctets de pixels compressés, et ils s'adaptent à toute taille de conteneur sans produire de bords flous comme le ferait un JPG. Ils s'adaptent aussi instantanément au mode sombre ou aux surcharges de thème en changeant des variables CSS. Le seul coût mineur est pendant les animations : animer background-image n'est pas accéléré GPU, donc les transitions cross-fade entre deux dégradés peuvent saccader. La solution est de superposer deux fonds en dégradé et d'animer l'opacité du supérieur, qui est totalement accélérée GPU. Pour les heros statiques, les dégradés sont presque toujours préférables aux fonds raster.

Comment assortir un dégradé à des couleurs que je vois sur un site que j'admire ?

Prenez une capture d'écran de l'inspiration, ouvrez-la dans n'importe quel sélecteur de couleur (le Sélecteur de Couleur d'Image de ce site, Figma ou la pipette de l'OS) et échantillonnez le reflet le plus brillant et l'ombre la plus sombre à l'intérieur du dégradé. Déposez ces deux valeurs HEX dans le premier et le dernier arrêt de couleur ici. Si le dégradé original a trois couleurs, échantillonnez aussi le milieu et ajoutez un arrêt à un pourcentage approximativement similaire. La plupart des dégradés professionnels utilisent des arrêts monochromatiques (une teinte, deux luminosités) ou analogues (teintes voisines avec interpolation fluide) ; si votre échantillon montre une couleur centrale très différente, c'est probablement un mélange additif avec superposition translucide plutôt qu'un seul dégradé. Essayez de changer votre angle à 135deg si l'inspiration balaie en diagonale.

Qu'est-ce que l'interpolation OKLCH et pourquoi est-elle plus belle que sRGB ?

Quand le navigateur dessine un dégradé, il doit inventer chaque couleur intermédiaire entre vos arrêts, et l'espace colorimétrique dans lequel il interpole change radicalement le résultat. La valeur par défaut héritée est sRGB, qui mélange les valeurs brutes rouge/vert/bleu ; comme sRGB n'est pas perceptuellement uniforme, les teintes opposées dérivent vers un gris terne et désaturé au point médian — le fameux problème du "pourquoi mon dégradé bleu-jaune devient boueux au milieu". OKLCH (et son frère cartésien Oklab) interpolent dans un espace perceptuellement uniforme conçu pour que des pas numériques égaux paraissent des pas visuels égaux, gardant la luminosité régulière et acheminant la teinte par le chemin court et vif plutôt que par le gris. Cet outil vous laisse choisir l'espace d'interpolation et prévisualise le résultat exact. Quand vous choisissez OKLCH, le CSS copié livre d'abord un repli perceptuel pré-rendu puis améliore progressivement vers la syntaxe native CSS Color 4 `in oklch` dans un bloc @supports, afin que les navigateurs qui ne comprennent pas l'indice rendent quand même le même dégradé fluide que vous avez approuvé au lieu de retomber silencieusement sur un autre mélange sRGB. Utilisez OKLCH ou Oklab pour des mélanges multi-teintes vifs ; sRGB seulement lorsque vous devez correspondre à un design hérité existant.

Comment fonctionne la vérification de contraste WCAG et qu'est-ce qui compte comme réussi ?

Les dégradés changent de luminosité sur leur longueur, donc un texte blanc parfaitement lisible sur l'extrémité claire d'un hero peut devenir illisible sur l'extrémité sombre (ou vice versa). La vérification de contraste échantillonne le dégradé densément de 0 % à 100 % dans l'espace d'interpolation choisi, calcule le rapport de contraste de luminance relative WCAG entre votre couleur de texte et chaque point échantillonné, et indique l'unique rapport du pire cas ainsi que la position où il survient. Un fond réussi doit dépasser le seuil partout, pas seulement à une extrémité : WCAG AA exige 4,5:1 pour le texte courant, AA Grand autorise 3:1 pour un texte de 18pt+/14pt gras, et AAA veut 7:1. Basculez entre texte blanc et noir (ou choisissez une couleur personnalisée) pour voir lequel est sûr. Si le rapport du pire cas échoue, corrigez en assombrissant ou éclaircissant l'extrémité problématique, en réduisant la saturation, en ajoutant une superposition semi-transparente entre le dégradé et le texte, ou en plaçant le texte sur sa propre carte pleine — puis revérifiez jusqu'à ce que la pire position passe.

Fonctionnalités Clés

• Créer dégradés linéaires et radiaux
• Aperçu en direct avec mises à jour instantanées
• Ajouter points de couleur illimités
• Ajuster positions couleurs avec précision
• Options de direction multiples
• Support angle personnalisé (0-360°)
• 8 beaux dégradés préréglés
• Copier code CSS dans presse-papiers
• Générateur dégradé aléatoire
• Inverser direction dégradé
• Supprimer points couleur (minimum 2)
• Exporter CSS prêt à utiliser
• Traitement 100% côté client
• Aucune communication serveur
• Fonctionne hors ligne
• Support mode sombre
• Interface compatible mobile