01
Distinguer angle et centre
En linéaire, 0 degré pointe vers le haut et 90 vers la droite. Le conique possède son propre angle de départ ; le radial utilise une forme et un centre, sans angle.
Outils HTML et CSS
générateur de dégradé CSSavec aperçu immédiat
Déplacez les couleurs et changez la forme : l’aperçu et le code à copier se mettent à jour ensemble.
générateur de dégradé CSS
Arrêts de couleur
Arrêt 1
Arrêt 2
Déclaration CSS
background-image: linear-gradient(90deg, #6366F1 0%, #EC4899 100%);Couleurs et CSS restent dans cet onglet du navigateur ; rien n’est envoyé.
Options du dégradé
Le CSS est prêt à copier.
Avec plusieurs couleurs, il est difficile de deviner le rendu en lisant une fonction CSS. Le générateur de dégradé CSS montre précisément où commencent les transitions douces et où deux arrêts superposés forment une limite nette.
Pour un en-tête, un bouton ou un motif circulaire, le générateur de dégradé CSS conserve la même palette quand vous passez du linéaire au radial ou au conique.
Pourquoi utiliser ce générateur de dégradé CSS
Comparer les formes à couleurs constantes et placer chaque arrêt avec précision.
Une palette pour trois formes
Le générateur de dégradé CSS garde les couleurs et leurs pourcentages lors du changement de type. Les réglages d’angle, de forme et de centre apparaissent seulement lorsqu’ils s’appliquent.
Un résultat périmé impossible à copier
Après un déplacement d’arrêt, aperçu et déclaration changent ensemble. Une valeur HEX invalide rend l’ancien résultat pâle et bloque la copie.
Trois détails pour maîtriser le rendu
02
Placer les arrêts à volonté
Glissez une poignée ou saisissez son pourcentage. Deux couleurs au même emplacement créent une séparation franche, sans transition.
03
Vérifier que le code est à jour
La génération automatique est activée au départ. Désactivez-la pour modifier plusieurs valeurs puis lancer avec Ctrl/Cmd+Entrée ; la copie reste bloquée entre-temps.
Formes, couleurs et déclaration réunies
Linéaire, radial et conique
Essayez un fondu directionnel, une lumière centrale ou un tour de cercle avec les mêmes couleurs.
Deux à huit arrêts de couleur
Pour chaque arrêt, modifiez le code HEX à six chiffres, l’opacité et la position, ou faites glisser sa poignée.
Une déclaration CSS standard
Copiez background-image tel qu’il apparaît dans l’aperçu ; les couleurs translucides sont écrites en rgba().
Limites de saisie et de sortie
- De deux à huit arrêts
- Les deux derniers arrêts ne peuvent pas être supprimés. Toute suppression présente d’abord un aperçu, demande confirmation et peut être annulée une fois.
- Couleurs HEX à six chiffres
- Saisissez #RRGGBB et l’opacité séparément. Une couleur invalide ou une valeur hors plage empêche la copie ; cet outil ne convertit pas le HSL.
- Une seule couche de dégradé
- Le générateur de dégradé CSS produit un seul background-image. Il n’importe ni image ni CSS existant et n’exporte pas de PNG, de Tailwind ou de préfixes anciens.
- Lisibilité du texte non garantie
- La luminosité varie selon l’emplacement. Contrôlez le contraste là où le texte se superpose réellement au fond.
Questions sur le générateur de dégradé CSS
Comment créer un dégradé CSS ?
Choisissez la forme puis réglez couleurs et positions. Le générateur de dégradé CSS affiche l’aperçu et une ligne background-image prête à copier.
Quelle différence entre un dégradé linéaire et radial ?
Le linéaire suit une direction ; le radial part d’un centre vers l’extérieur. Le conique fait tourner les couleurs autour du centre.
Comment ajouter plusieurs couleurs au dégradé ?
Ajoutez un arrêt : il se place au milieu du plus grand intervalle. Vous pouvez ensuite régler sa couleur et son pourcentage, jusqu’à huit arrêts.
Pourquoi l’angle disparaît-il en mode radial ?
Le radial n’a pas de direction. Choisissez plutôt cercle ou ellipse et déplacez son centre horizontalement et verticalement.
Peut-on copier le code CSS dans une feuille de style ?
Oui. Collez la déclaration background-image complète dans la règle de votre élément ; aucun fichier image n’est nécessaire.
Vous avez trouvé un cas particulier ?
Essayer le générateur de dégradé CSS
Revenez aux arrêts, ajustez la forme et copiez le code quand l’aperçu convient.