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
4.9 (2.8k ratings)
À propos Générateur de gradient
Générez instantanément et gratuitement des dégradés CSS. Créez des dégradés linéaires et radiaux multicolores. Personnalisez l'angle, la position et les points d'arrêt de couleur. Copiez directement le code CSS. Idéal pour la conception web et le développement d'interfaces utilisateur. Aucune inscription requise : fonctionne entièrement dans votre navigateur.
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.