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

Ajoutez deux couleurs ou plus pour générer instantanément le code CSS d'un linear-gradient ou radial-gradient avec aperçu en direct. Ajustez librement l'angle et les positions, puis copiez le code en un clic.

Astuces d'utilisation

  • Vous pouvez ajouter jusqu'à 6 points de couleur et ajuster librement la couleur et la position (%) de chacun pour créer des dégradés complexes à plusieurs couleurs.
  • Pour un dégradé linéaire, 0 degré correspond au bas vers le haut et 90 degrés à la gauche vers la droite ; utilisez le curseur pour un réglage intuitif.
  • Les dégradés radiaux n'ont pas d'angle : les couleurs rayonnent plutôt depuis le centre vers l'extérieur de façon circulaire.
  • Cliquez sur « Copier le CSS » pour copier le code généré directement dans le presse-papiers et le coller dans votre feuille de style.

Questions fréquentes

linear-gradient fait passer les couleurs en ligne droite selon un angle défini, ce qui est courant pour les boutons ou les fonds en bande. radial-gradient, lui, diffuse les couleurs depuis un point central de façon circulaire ou elliptique, ce qui convient bien aux effets de projecteur ou de profondeur.

Dans linear-gradient() en CSS, l'angle est exprimé en degrés (deg). 0deg va du bas vers le haut, 90deg de la gauche vers la droite et 180deg du haut vers le bas. Notez que CSS mesure les angles dans le sens horaire, ce qui diffère de la convention mathématique habituelle où 0 degré pointe vers la droite.

Le pourcentage de chaque point de couleur indique à quelle position du dégradé — du début (0 %) à la fin (100 %) — cette couleur est placée. En décalant les positions, on peut créer des zones où la couleur change progressivement et d'autres où elle change brusquement.

linear-gradient et radial-gradient fonctionnent sans préfixe de fournisseur dans tous les navigateurs principaux, dont Chrome, Firefox, Safari et Edge, et même sous IE10. Aucun ajustement supplémentaire n'est nécessaire, sauf pour prendre en charge de très anciens navigateurs mobiles.
ツールくん

Anecdote — pourquoi les dégradés CSS ont remplacé les images en dégradé

Avant CSS3, les fonds en dégradé sur le web étaient généralement créés sous forme d'images PNG ou JPEG réalisées dans un logiciel de retouche d'image. Cette approche présentait de vrais inconvénients : des requêtes supplémentaires ralentissant le chargement de la page, un rendu flou lors de l'agrandissement dans une mise en page responsive, et la nécessité de réexporter toute l'image pour modifier une seule couleur.

Lorsque les navigateurs ont implémenté la syntaxe linear-gradient et radial-gradient au début des années 2010, ces problèmes ont largement disparu. Comme les dégradés sont entièrement décrits en texte, ils sont légers, restent nets à n'importe quelle taille et peuvent être recolorés en modifiant simplement quelques valeurs dans la feuille de style.

Les premières implémentations nécessitaient des préfixes de fournisseur différents (-webkit-, -moz-, -o-, etc.) et une syntaxe légèrement différente selon le navigateur, obligeant les développeurs à écrire plusieurs versions préfixées de la même règle. Désormais que la syntaxe a été standardisée par le W3C, la version sans préfixe fonctionne de manière cohérente dans tous les navigateurs principaux.

Plus d'outils dans cette catégorie