Générateur de Dégradés
Générer un dégradé linéaire ou radial
Réglages
Aperçu
background: linear-gradient(90deg, #fa8072 0%, #c8fff1 100%);
À propos de l'outil
Ce générateur écrit la propriété CSS background d’un dégradé linéaire (linear-gradient) ou radial (radial-gradient). Il sert à composer le fond d’une bannière, d’un bouton ou d’une section sans ouvrir de logiciel de dessin. L’aperçu se met à jour à chaque réglage et le code affiché juste en dessous correspond exactement à ce que vous voyez.
Chaque couleur est un arrêt du dégradé, placé entre 0 et 100 %. Vous pouvez en ajouter autant que nécessaire et en retirer tant qu’il en reste au moins deux. En mode linéaire, l’angle va de 0 à 360 degrés ; en mode radial, le dégradé forme un cercle dont vous réglez la position horizontale du centre. Vos réglages restent mémorisés dans le navigateur.
Comment l'utiliser
- Choisissez le type de dégradé : Linéaire ou Radial.
- Réglez l’Angle (°) pour un dégradé linéaire, ou la Position du centre (%) pour un dégradé radial.
- Choisissez chaque couleur et sa Position (%), et cliquez sur Ajouter une couleur pour un arrêt supplémentaire.
- Vérifiez le rendu dans l’Aperçu, puis cliquez sur Copier le CSS.
Questions fréquentes
Quel code CSS l’outil produit-il ?
Une seule déclaration background contenant linear-gradient(angle, couleurs) ou radial-gradient(circle at x %, couleurs). Chaque couleur est notée en hexadécimal et suivie de sa position en pourcentage. Collez la ligne dans la règle CSS de l’élément concerné.
Combien de couleurs peut contenir un dégradé ?
Au moins deux, sans plafond fixé. Le bouton Ajouter une couleur crée un arrêt blanc placé à 100 %, que vous modifiez ensuite. La suppression d’une couleur n’est possible que s’il en reste plus de deux.
Peut-on utiliser des couleurs semi-transparentes ?
Pas directement : les couleurs se choisissent avec le sélecteur du navigateur, au format hexadécimal à six chiffres, donc opaques. Pour un effet de transparence, remplacez une couleur dans le code copié par une valeur rgba() ou par le mot-clé transparent.
Mes réglages sont-ils envoyés à un serveur ?
Non. Le dégradé et son code sont calculés dans votre navigateur, sans appel réseau. Les couleurs, positions et angles sont seulement enregistrés dans le stockage local du navigateur, pour les retrouver lors de votre prochaine visite.