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.

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