Comment créer des dégradés CSS

Les dégradés CSS vous permettent de créer des transitions de couleurs fluides sans fichiers image. Ils sont plus légers que les images, s'adaptent parfaitement à n'importe quelle taille d'écran et sont faciles à personnaliser. Un dégradé décoratif typique économise 20-100 Ko par rapport à un JPG ou PNG équivalent, et s'adapte à n'importe quelle résolution sans perte de qualité.

Types de dégradés CSS

Dégradé linéaire : les couleurs passent en ligne droite (de haut en bas, de gauche à droite, ou à n'importe quel angle).

background: linear-gradient(135deg, #667eea, #764ba2);

Dégradé radial : les couleurs rayonnent vers l'extérieur depuis un point central selon un motif circulaire ou elliptique.

background: radial-gradient(circle, #667eea, #764ba2);

Dégradé conique : les couleurs tournent autour d'un point central, comme une roue chromatique.

background: conic-gradient(from 0deg, #667eea, #764ba2, #667eea);

Comment créer des dégradés visuellement

1. Sélectionnez le type de dégradé : choisissez linéaire ou radial et définissez l'angle ou la position.
2. Ajoutez des arrets de couleur : cliquez pour ajouter des couleurs à différentes positions le long du dégradé. Ajustez chaque couleur et sa position.
3. Copiez le CSS : copiez le code généré et collez-le dans votre feuille de style.

Utiliser un générateur visuel est plus rapide que d'écrire la syntaxe de dégradé à la main, surtout lorsque vous expérimentez avec plusieurs arrets de couleur.

Une brève histoire des dégradés CSS

Avant l'existence des dégradés CSS, les concepteurs Web devaient utiliser des images d'arrière-plan pour tout effet de dégradé : carreler un GIF à une seule colonne horizontalement, ou découper un PSD Photoshop en plusieurs JPG. Cela fonctionnait mais ajoutait du poids de fichier, des requetes réseau et de la pixellisation lors du zoom.

WebKit a ajouté la première implémentation -webkit-gradient() dans Safari 4 (juin 2009) avec une syntaxe verbeuse et difficile à lire. Firefox 3.6 (janvier 2010) a suivi avec -moz-linear-gradient(). Le groupe de travail CSS a standardisé linear-gradient() et radial-gradient() sans préfixe dans CSS Image Values Level 3 (2012), à ce moment-là les préfixes de navigateur ont commencé à disparaitre.

Les dégradés coniques (conic-gradient()) sont arrivés beaucoup plus tard, d'abord dans Chrome 69 (septembre 2018) et atteignant tous les navigateurs majeurs avec Safari 12.1 (mars 2019). Ils permettent des motifs visuels qui étaient auparavant impossibles sans images : graphiques en secteurs, roues chromatiques, échiquiers, motifs en éventail.

Les dégradés CSS sont désormais considérés comme des fonctionnalités de base des navigateurs. Presque n'importe quel effet de dégradé que vous pourriez souhaiter est réalisable en CSS, sans images ni JavaScript nécessaires.

Motifs de dégradé courants

Fond de section héros : un dégradé subtil à deux couleurs ajoute de la profondeur sans distraire du texte.

background: linear-gradient(135deg, #0f172a, #1e3a5f);

Mise en valeur de bouton : un léger dégradé donne aux boutons un aspect tridimensionnel.

background: linear-gradient(180deg, #3b82f6, #2563eb);

Superposition sur images : une superposition en dégradé améliore la lisibilité du texte sur les photos.

background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.7));

Bordure d'accent : utilisez un dégradé comme bordure pour un intéret visuel.

border-image: linear-gradient(90deg, #667eea, #764ba2) 1;

Dégradé en maillage animé : empilez plusieurs dégradés radiaux et animez les positions.

background:
  radial-gradient(at 20% 30%, #667eea 0%, transparent 50%),
  radial-gradient(at 80% 70%, #764ba2 0%, transparent 50%),
  #0f172a;

Arrière-plan effet verre : associez un dégradé à faible opacité avec un flou backdrop-filter.

background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
backdrop-filter: blur(10px);

Positionnement des arrets de couleur

Par défaut, les arrets de couleur sont uniformément répartis. Vous pouvez remplacer leurs positions pour controler où chaque couleur apparait :

/* Jaune au milieu 60%, s'estompant en rouge sur les bords */
background: linear-gradient(90deg, red 0%, yellow 20%, yellow 80%, red 100%);

Vous pouvez également utiliser des arrets durs pour créer des rayures ou des motifs géométriques sans anticrénelage :

/* Rayures à deux couleurs sans transition */
background: linear-gradient(45deg, #667eea 50%, #764ba2 50%);

L'astuce consiste à placer deux arrets de couleur à la meme position. Le navigateur n'interpole pas entre eux, produisant un bord net.

Quand utiliser des dégradés vs couleurs unies vs images

• Couleur unie : meilleur pour les fonds de surface principaux (cartes, modales, navigation). Prévisible et lisible.
• Dégradé CSS : meilleur pour les fonds décoratifs, les sections héros, les états de survol des boutons, les effets de superposition. Faible poids de fichier, évolutif, animable.
• Image d'arrière-plan (JPG/PNG) : meilleur pour les fonds photographiques ou les illustrations complexes que les dégradés ne peuvent pas reproduire.
• Dégradé SVG : meilleur quand vous avez besoin d'un dégradé dans une icone ou une illustration, surtout si le dégradé doit s'adapter à la géométrie SVG.

Un motif courant consiste à superposer les trois : une base de couleur unie, une superposition de dégradé CSS et une image de texture à faible opacité par-dessus.

Pièges courants

• Bandes sur les dégradés lisses : sur les écrans couleur 8 bits (moniteurs plus anciens, certains écrans mobiles), les dégradés lisses avec des couleurs similaires peuvent afficher des bandes visibles. Ajouter une superposition de texture bruyante subtile réduit cet artefact.
• Confusion d'angle de dégradé : linear-gradient(0deg, ...) commence en bas et monte ; linear-gradient(90deg, ...) va de gauche à droite ; linear-gradient(180deg, ...) va de haut en bas. L'angle indique la direction VERS laquelle le dégradé s'écoule, pas d'où.
• Performance avec de nombreux arrets : un dégradé avec 20+ arrets de couleur utilise plus de mémoire GPU et peut ralentir le défilement sur mobile. Pour les effets de dégradé en maillage, souvent 3-5 arrets produisent des résultats visuels presque identiques avec de bien meilleures performances.
• Contraste du texte sur les dégradés : un en-tete qui se lit bien contre la partie la plus claire du dégradé peut devenir illisible sur la partie la plus sombre. Utilisez la propriété text-shadow ou un contour de texte sombre comme filet de sécurité.
• Compatibilité avec les navigateurs plus anciens : si vous devez prendre en charge IE11 ou des navigateurs mobiles très anciens, les dégradés coniques ne sont pas disponibles. Les dégradés linéaires et radiaux fonctionnent partout en moderne.
• Direction du dégradé dans les langues RTL : un dégradé de gauche à droite dans une mise en page arabe ou hébraïque s'écoule à l'envers du point de vue du lecteur. Testez dans les deux directions ou utilisez les propriétés logiques CSS.

Conseils

• Restez subtil : les meilleurs dégradés sont à peine perceptibles. Un léger décalage entre deux couleurs similaires ajoute de la profondeur. Les dégradés arc-en-ciel spectaculaires ont rarement l'air professionnel.
• Utilisez des dégradés à la place d'images : un dégradé CSS se charge instantanément sans requete réseau. Remplacez les images d'arrière-plan décoratives par des dégradés lorsque possible.
• Testez en mode sombre : les dégradés qui ont l'air bien sur un fond clair peuvent paraitre délavés ou détonner en mode sombre. Envisagez de définir différents dégradés pour chaque thème.
• Attention au contraste du texte : si vous placez du texte sur un dégradé, vérifiez que le texte est lisible sur toute la plage du dégradé, pas seulement sur la partie la plus claire ou la plus sombre.
• Utilisez une syntaxe consciente des espaces de couleur : linear-gradient(in oklch, #667eea, #764ba2) produit des transitions perceptuelles plus fluides que l'interpolation sRGB par défaut. Pris en charge dans Chrome 113+, Safari 16.4+, Firefox 113+.
• Inspectez avec les DevTools : les DevTools de Chrome et Firefox affichent un éditeur visuel de dégradé lorsque vous survolez une valeur de dégradé dans le panneau Styles. Le moyen le plus rapide d'ajuster les dégradés existants.

Confidentialité

Le générateur de dégradé CSS fonctionne entièrement dans votre navigateur. Les couleurs que vous choisissez, les configurations de dégradé avec lesquelles vous expérimentez et le CSS que vous générez ne quittent jamais votre appareil. Il n'y a pas de télémétrie, pas de suivi d'utilisation, pas de téléversement de vos choix de conception. Pour les outils utilisés pendant l'exploration de conception, cela compte : les couleurs et les motifs que vous essayez peuvent révéler les futures orientations de marque, les thèmes de produits non annoncés ou les travaux de clients sous NDA. La génération exclusivement basée sur le navigateur garde tout cela sur votre machine.