Feedback
Une remarque, un bug, une idée ?
Votre avis nous aide à améliorer nos outils. Signalez un problème, suggérez une fonctionnalité manquante ou dites-nous simplement ce que vous en pensez.
Création de site & Design
Générateur de dégradés CSS
Créez des dégradés de couleurs personnalisés et récupérez le code CSS prêt à coller, avec aperçu en direct, choix du type et de l’angle.
Un dégradé CSS est une transition douce entre deux couleurs ou plus, utilisée comme arrière-plan sur un site web. Contrairement à une image, un dégradé est généré directement par le code, ce qui le rend léger, net à toutes les résolutions et facile à modifier. Il existe deux grands types : le dégradé linéaire, qui suit une direction droite, et le dégradé radial, qui rayonne depuis un centre. Notre générateur produit le code des deux.
Pour créer un dégradé, vous choisissez un type, une direction et au moins deux couleurs. En CSS, cela s'écrit avec la fonction linear-gradient ou radial-gradient, appliquée à la propriété background. Notre outil vous permet de composer votre dégradé visuellement, en ajustant les couleurs et l'angle, puis de récupérer le code CSS complet prêt à coller dans votre feuille de style, sans avoir à l'écrire à la main.
Un dégradé linéaire fait évoluer les couleurs le long d'une ligne droite, selon un angle que vous définissez, par exemple de gauche à droite ou du haut vers le bas. Un dégradé radial, lui, part d'un point central et rayonne vers l'extérieur en cercle. Le linéaire convient aux arrière-plans classiques et aux bandeaux, tandis que le radial crée un effet de halo ou de projecteur. Notre générateur vous permet de tester les deux instantanément.
Une fois votre dégradé créé, copiez le code généré et collez-le dans la propriété background de l'élément concerné, dans votre feuille de style CSS. Par exemple, vous pouvez l'appliquer à une section, à un bouton ou à l'arrière-plan de votre page.
Oui, les dégradés linéaires et radiaux sont pris en charge par tous les navigateurs modernes, sur ordinateur comme sur mobile. Ils font partie des standards CSS depuis de nombreuses années et ne nécessitent plus de préfixes particuliers pour la grande majorité des cas d'usage. Vous pouvez donc les utiliser en toute confiance sur votre site, sans craindre de problème d'affichage pour vos visiteurs.
Dans la plupart des cas, oui. Un dégradé CSS est beaucoup plus léger qu'une image, ce qui améliore la vitesse de chargement de votre page, un critère important pour le référencement. Il reste également net quelle que soit la taille de l'écran, là où une image peut pixeliser ou nécessiter plusieurs versions. Pour un fond de couleur, le dégradé CSS est donc souvent le choix le plus performant et le plus flexible.