Générateur de dégradés CSS
Créez des dégradés CSS linéaires et radiaux avec un aperçu en direct et copiez le code background prêt à l’emploi.
Outils similaires
Comment utiliser l'outil Dégradé CSS
- 01
Choisissez un dégradé linéaire ou radial.
- 02
Ajoutez des arrêts de couleur et réglez la couleur et la position de chacun.
- 03
Pour un dégradé linéaire, réglez l’angle avec le curseur.
- 04
Copiez le CSS et collez-le dans votre feuille de style.
Ce que fait ce générateur
Ce générateur de dégradés CSS construit des dégradés linéaires et radiaux à partir d’arrêts de couleur que vous contrôlez, avec un aperçu en direct et une déclaration background prête à coller. Faites glisser les arrêts le long de la barre, réglez l’angle ou la forme, et le CSS se met à jour instantanément.
Tout s’exécute dans votre navigateur à partir des couleurs et réglages que vous choisissez : rien n’est envoyé en ligne, et vous pouvez copier le résultat et l’utiliser hors connexion.
Dégradés linéaires et radiaux
Un dégradé linéaire mélange les couleurs le long d’une ligne droite, et l’angle définit sa direction : 0 degré pointe vers le haut, 90 degrés vers la droite, 180 degrés vers le bas. Un dégradé radial mélange les couleurs depuis le centre vers l’extérieur, en cercle ou en ellipse.
Les deux sont des valeurs CSS standard, écrites linear-gradient() et radial-gradient(), et les deux utilisent la même liste d’arrêts de couleur : changer de type conserve vos couleurs et ne modifie que leur diffusion.
Travailler avec les arrêts de couleur
Chaque arrêt de couleur est une couleur placée à une position de 0 % à 100 %. Le dégradé se mélange en douceur entre arrêts voisins : la position d’un arrêt contrôle donc l’endroit où sa couleur culmine et la vitesse à laquelle elle se fond dans la suivante.
Ajoutez autant d’arrêts que nécessaire pour créer des dégradés multicolores, faites-les glisser pour affiner le mélange, ou cliquez sur la barre pour déposer un nouvel arrêt là où vous le souhaitez. Deux arrêts sont le minimum pour un dégradé.
Utiliser le CSS dans votre projet
Copiez le code généré et collez-le comme background de n’importe quel élément, par exemple une section, une carte ou un bouton. Les navigateurs modernes prennent en charge linear-gradient et radial-gradient sans préfixe : la valeur fonctionne telle quelle.
Comme un dégradé n’est qu’une valeur, vous pouvez aussi l’utiliser partout où une image d’arrière-plan est attendue, le superposer à une couleur unie en secours, ou réutiliser les mêmes arrêts dans une version linéaire et une version radiale pour un rendu cohérent.
Questions fréquentes
Quelle est la différence entre un dégradé linéaire et un dégradé radial ?
Un dégradé linéaire mélange les couleurs le long d’une ligne droite selon l’angle que vous définissez. Un dégradé radial mélange les couleurs depuis le centre vers l’extérieur, en cercle. Les deux utilisent les mêmes arrêts de couleur.
Comment fonctionnent les arrêts de couleur ?
Chaque arrêt est une couleur placée à une position de 0 % à 100 %. Le dégradé se mélange en douceur entre arrêts voisins : déplacer un arrêt change l’endroit où sa couleur culmine.
Comment utiliser le CSS généré ?
Copiez le code et collez-le comme propriété background de n’importe quel élément, par exemple un div ou un bouton. Il fonctionne dans tous les navigateurs modernes sans préfixe.
Puis-je ajouter plus de deux couleurs ?
Oui. Utilisez Ajouter un arrêt pour insérer autant de couleurs que vous le souhaitez, puis réglez la position de chacune pour contrôler le mélange.
Des données sont-elles envoyées en ligne ?
Non. Le dégradé est construit entièrement dans votre navigateur à partir des couleurs et réglages que vous choisissez, et rien n’est envoyé à un serveur.