À propos de cet outil
Le générateur dessine des arrière-plans au moyen de dégradés CSS linéaires ou radiaux. Chaque point possède une couleur et une position en pourcentage. Ajoutez ou supprimez des points pour observer leur effet sur la transition.
Mode d'emploi
- Choisissez un dégradé linéaire ou radial.
- Définissez 2 à 6 points de couleur, positionnés entre 0 et 100 %.
- Pour un dégradé linéaire, réglez l'angle entre 0 et 360°. Le curseur et le champ numérique restent synchronisés.
- Vérifiez l'aperçu et copiez le CSS. Réinitialisez ou chargez un exemple pour comparer les couleurs.
Exemples
- Du rouge à 0 % et du bleu à 100 % forment un dégradé bicolore simple.
- Une troisième couleur à 50 % modifie le milieu de la transition.
- Deux points à la même position créent une séparation nette entre les couleurs.
background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%);
background: radial-gradient(circle, #ffffff 0%, #000000 100%);Fonctionnement et explications CSS
linear-gradient() interpole les couleurs dans une direction donnée ; radial-gradient() produit une transition du centre vers l'extérieur. Les couleurs sont validées comme codes HEX opaques et les positions comme pourcentages avant de générer une déclaration background valide.
Utilisations courantes
- Créer des arrière-plans et des couleurs de boutons.
- Comparer rapidement l'orientation des dégradés multicolores.
- Comprendre l'effet de la position des points de couleur.
Confidentialité
La saisie, les calculs, la génération CSS et les aperçus sont entièrement traités dans votre navigateur. Aucun contenu n'est envoyé à un serveur. Aucun backend, base de données, API en ligne ou CDN tiers n'est utilisé, et vos données ne sont pas enregistrées automatiquement.
FAQ
Quelle est la différence entre linear-gradient et radial-gradient ?
Un dégradé linéaire suit une direction droite. Un dégradé radial s'étend depuis le centre, généralement sous forme de cercle ou d'ellipse.
Un dégradé CSS est-il une image ?
C'est une image CSS générée par le navigateur, sans téléchargement de fichier image ni service de génération en ligne.
Comment changer la direction d'un dégradé linéaire ?
Modifiez l'angle : 0deg pointe vers le haut, 90deg vers la droite et 180deg vers le bas.
Puis-je utiliser plus de trois couleurs ?
Oui. Cette page accepte 2 à 6 points, chacun avec sa propre couleur et sa position.