Générateur de gradient
Type de dégradé
Paramètres
Arrêts de couleur
Préréglages
Aperçu
Code CSS
background: linear-gradient(90deg, #3B82F6 0%, #8B5CF6 100%);
Tenez-nous au courant
Veuillez partager votre expérience
Outils similaires
135 degrés signifie coin haut-gauche vers bas-droite
La convention d'angle embrouille tout le monde une fois : en CSS, 0deg pointe vers le haut et les degrés tournent dans le sens horaire, donc le 135deg vedette coule du coin haut-gauche vers le bas-droite — c'est pourquoi presque chaque fond héros diagonal utilise cette valeur. Chaque arrêt de couleur porte une position de 0-100 % : rapprocher les deux arrêts d'un dégradé bleu-violet (disons 20 % et 80 %) crée une bande douce, tandis qu'un arrêt à 0 % fait commencer une couleur net au bord. Le bouton Aléatoire saute de palettes complètes quand on cherche un point de départ à affiner plutôt qu'une page blanche.
Banding, arrêts durs et jumeaux de mode sombre
Trois problèmes de qualité séparent un dégradé amateur d'un dégradé de production. Les dégradés subtils sur de grandes surfaces peuvent faire du banding — lignes de contour visibles — surtout sur les écrans à faible profondeur de bits ; élargir l'écart entre les arrêts ou écarter légèrement les deux teintes le masque habituellement. Placer deux couleurs différentes à la même position crée un arrêt dur — c'est ainsi qu'on fait des rayures, pas des fondus. Et un dégradé réglé pour une page claire paraît souvent boueux sur une sombre : le mode sombre demande sa propre paire, généralement aux tons médians plus lumineux, gardée comme variante séparée.
À propos Générateur de gradient
Les dégradés sont devenus l'arrière-plan par défaut du web moderne — bannières héros, boutons d'action, écrans de chargement, en-têtes de cartes — et chacun est une ligne de CSS précisant des couleurs, leurs positions d'arrêt et une direction. Écrire cette ligne à la main est possible ; l'itérer à l'œil est plus rapide. Le générateur existe pour l'itération : déplacez les arrêts, basculez entre linéaire et radial, et lisez le CSS fini directement dans l'outil.
Comment utiliser
Étape 1
Sélectionnez le type de dégradé : linéaire, radial ou conique
Étape 2
Ajouter et personnaliser les arrêts de couleur (minimum 2 couleurs)
Étape 3
Ajuster les paramètres spécifiques au type (angle, forme, position)
Étape 4
Prévisualisez votre dégradé en temps réel
Étape 5
Utilisez des préréglages pour trouver rapidement l'inspiration ou générez des dégradés aléatoires.
Étape 6
Copiez le code CSS pour l'utiliser dans vos projets.
Caractéristiques et avantages
- ✅3 types de gradient : linéaire, radial et conique
- ✅Arrêts de couleur illimités avec contrôle de position
- ✅Personnalisation complète : couleurs, angles, formes, positions
- ✅8 magnifiques préréglages : Coucher de soleil, Océan, Forêt, Rêve violet, Feu, Bleus frais, Arc-en-ciel, Pêche
- ✅Générateur de dégradés aléatoires pour l'inspiration
- ✅Aperçu en temps réel pendant la personnalisation
- ✅Copier le code CSS dans le presse-papiers en un clic
- ✅Faites glisser les curseurs pour ajuster les positions des couleurs
- ✅100 % gratuit – sans filigrane, sans inscription
- ✅Fonctionne hors ligne - toute la génération se fait dans votre navigateur
FAQ
Quels types de dégradés sont pris en charge ?
Nous prenons en charge 3 types de dégradés CSS : linéaire (dégradés en ligne droite avec un angle réglable de 0 à 360°), radial (dégradés circulaires ou elliptiques à partir d’un point central) et conique (dégradés circulaires qui tournent autour d’un point central, parfaits pour les diagrammes circulaires et les roues chromatiques).
Comment ajouter plus de couleurs à mon dégradé ?
Cliquez sur le bouton « + » dans la section « Points de couleur » pour ajouter une nouvelle couleur. Vous pouvez en ajouter autant que vous le souhaitez. Chaque point de couleur possède un curseur de position (0-100 %) permettant de contrôler son emplacement dans le dégradé. Pour supprimer une couleur, cliquez sur l’icône de la corbeille (minimum 2 couleurs requises).
Quelle est la différence entre les types de dégradés ?
Les dégradés linéaires font varier les couleurs en ligne droite selon un angle précis. Les dégradés radiaux rayonnent à partir d'un point central en formant un cercle ou une ellipse. Les dégradés coniques font pivoter les couleurs autour d'un point central, à la manière d'une roue chromatique ; ils sont particulièrement utiles pour les diagrammes circulaires et les motifs circulaires.
Comment utiliser le code CSS généré ?
Cliquez sur le bouton « Copier » pour copier le code CSS dans votre presse-papiers. Collez-le ensuite dans votre fichier CSS ou dans un attribut de style. Le code inclut la propriété background complète, par exemple : background: linear-gradient(90deg, #3B82F6 0%, #8B5CF6 100%);
Puis-je sauvegarder mes dégradés ?
L'outil ne stocke pas les dégradés, mais vous pouvez copier le code CSS et l'enregistrer dans vos fichiers de projet. Vous pouvez également enregistrer des configurations de dégradés spécifiques en sauvegardant le code CSS dans un fichier texte ou un système de conception.
Quels sont les dégradés prédéfinis ?
Nous proposons 8 préréglages de dégradés conçus par des professionnels : Coucher de soleil (du rouge chaud au jaune), Océan (du bleu profond au cyan), Forêt (du turquoise au vert), Rêve violet (du violet au rose), Feu (dégradé radial du jaune au rouge), Bleus froids (dégradé bleu), Arc-en-ciel (spectre complet conique) et Pêche (tons pêche doux). Cliquez sur un préréglage pour l’appliquer instantanément.
Comment fonctionne le générateur de gradient aléatoire ?
Cliquez sur le bouton « Dégradé aléatoire » pour générer un dégradé totalement aléatoire avec 2 à 4 points d'arrêt, des couleurs aléatoires et un type de dégradé aléatoire. C'est idéal pour trouver l'inspiration ou découvrir des combinaisons de couleurs inattendues.
Puis-je ajuster la position de chaque couleur ?
Oui ! Chaque point de couleur possède un curseur de position qui contrôle son emplacement dans le dégradé (0 à 100 %). Déplacez le curseur ou saisissez une valeur précise pour ajuster finement les transitions de couleurs. Des couleurs proches créent des transitions plus nettes, tandis que des couleurs éloignées créent des fondus plus doux.