Générateur de Dégradés de Couleur
Créez visuellement des dégradés CSS linéaires, radiaux et coniques - instantanément et gratuitement. Ajoutez jusqu'à 10 arrêts de couleur, définissez des positions exactes, choisissez la direction et l'angle, et obtenez un CSS prêt pour la production en un clic. Six préréglages inclus pour démarrer. Entièrement privé, sans inscription.
Presets
Gradient Type
Direction
Color Stops (2)
Click the colour swatch to open the colour picker. Drag the slider to adjust position.
background: linear-gradient(to right, #6366f1 0%, #ec4899 100%);
Pourquoi utiliser notre générateur de dégradés de couleur ?
- Aperçu en direct et CSS instantané : le générateur de dégradés de couleur met à jour l'aperçu en direct et la sortie CSS à chaque modification - aucun bouton à presser. Voyez votre dégradé exactement tel qu'il apparaîtra dans le navigateur et copiez le CSS en un clic.
- Trois types de dégradés et un contrôle total : créez des dégradés linéaires, radiaux et coniques avec un contrôle total sur la direction, l'angle, la forme, la taille et la position du centre. Ajoutez jusqu'à 10 arrêts de couleur, définissez des positions exactes et activez le mode répétition pour des motifs en mosaïque.
- 100 % privé - aucun envoi : toute la génération de dégradés se fait localement dans votre navigateur. Vos choix de couleurs ne quittent jamais votre appareil et ne sont jamais envoyés à un serveur - sûr pour les projets clients et les design systems propriétaires.
- Gratuit et sans limite : générez un nombre illimité de dégradés sans inscription, sans abonnement et sans plafond d'utilisation. Le générateur de dégradés de couleur est entièrement gratuit pour toujours, sans publicité bloquant l'interface.
Cas d'usage courants du générateur de dégradés de couleur
- Arrière-plans de sites web et sections hero : les designers web utilisent le générateur de dégradés de couleur pour créer des arrière-plans de section hero accrocheurs, des dégradés de page et des séparateurs de section. Copiez le CSS directement dans votre feuille de styles en un clic.
- Développement CSS et Tailwind : les développeurs frontend utilisent le générateur pour créer et tester du CSS de dégradé avant de l'ajouter à leur base de code. La sortie est un CSS prêt pour la production qui fonctionne dans tous les navigateurs modernes.
- Tokens de design system : les équipes de design system utilisent le générateur pour définir des tokens de dégradé pour les arrière-plans, les cartes et les composants d'interface. Le constructeur visuel facilite l'alignement des dégradés sur les couleurs de marque.
- Visuels réseaux sociaux et marketing : les marketeurs et créateurs de contenu utilisent le générateur pour créer des arrière-plans dégradés pour les publications sociales, bannières et en-têtes d'e-mail. La bibliothèque de préréglages offre des points de départ instantanés.
- Style des boutons et des cartes : les développeurs d'interface utilisent le générateur pour créer des remplissages dégradés pour les boutons, cartes, badges et barres de progression. Les dégradés radiaux et coniques ajoutent de la profondeur et de l'intérêt visuel aux composants d'interface.
- Conception de landing pages et CTA : les optimiseurs de conversion utilisent le générateur pour créer des CTA et des arrière-plans de section en dégradé à fort contraste qui attirent l'attention et guident l'utilisateur dans la page.
Qu'est-ce qu'un dégradé CSS ?
Un dégradé CSS est une transition progressive entre deux couleurs ou plus, définie entièrement en CSS - aucun fichier image n'est nécessaire. Les dégradés se créent avec la propriété background ou background-image et des fonctions de dégradé. Notre générateur de dégradés de couleur construit la chaîne CSS du dégradé de façon visuelle et produit un CSS prêt pour la production qui fonctionne dans tous les navigateurs modernes, sans préfixe vendeur.
Comment fonctionne notre générateur de dégradés de couleur
- Choisissez un type de dégradé : sélectionnez Linéaire (transition en ligne droite), Radial (circulaire ou elliptique depuis un point central) ou Conique (rotation autour d'un point central). Utilisez un préréglage pour démarrer instantanément.
- Configurez les arrêts de couleur et les options : ajoutez jusqu'à 10 arrêts de couleur avec le sélecteur de couleur ou la saisie hexadécimale. Faites glisser le curseur de position pour placer chaque arrêt précisément. Définissez la direction, l'angle, la forme, la taille et la position du centre pour votre type de dégradé. Toutes les modifications mettent à jour l'aperçu instantanément.
- Copiez le CSS : cliquez sur « Copier le CSS » pour copier la déclaration background: prête pour la production dans votre presse-papiers. Collez-la directement dans votre feuille de styles.
Les trois types de dégradés CSS
- Dégradé linéaire : fait transiter les couleurs le long d'une ligne droite. Contrôlez la direction avec des mots-clés préréglés (to right, to bottom, etc.) ou un angle personnalisé en degrés. Utilisez repeating-linear-gradient pour des motifs rayés.
- Dégradé radial : fait transiter les couleurs depuis un point central selon une forme circulaire ou elliptique. Contrôlez la forme (circle ou ellipse), la taille (farthest-corner, closest-side, etc.) et la position du centre.
- Dégradé conique : fait transiter les couleurs en tournant autour d'un point central - comme une roue chromatique ou un camembert. Contrôlez l'angle de départ et la position du centre. Idéal pour les camemberts, roues chromatiques et designs angulaires.
Positions des arrêts de couleur
Chaque arrêt de couleur possède une position (0 %-100 %) qui détermine où cette couleur apparaît dans le dégradé. Si deux arrêts partagent la même position, le dégradé crée un bord net plutôt qu'une transition progressive - utile pour des effets rayés. Le générateur de dégradés de couleur trie automatiquement les arrêts par position, vous pouvez donc les ajouter dans n'importe quel ordre.
Foire aux questions
Un générateur de dégradés de couleur est un outil visuel qui construit du code CSS de dégradé à partir d'arrêts de couleur configurables, du type de dégradé et des réglages de direction. Notre générateur prend en charge les dégradés linéaires, radiaux et coniques avec jusqu'à 10 arrêts de couleur et produit un CSS prêt pour la production. Toute la génération s'exécute entièrement dans votre navigateur sans envoyer de données à un serveur.
Les dégradés linéaires font transiter les couleurs le long d'une ligne droite selon une direction ou un angle donnés. Les dégradés radiaux font transiter les couleurs depuis un point central selon une forme circulaire ou elliptique. Les dégradés coniques font transiter les couleurs en tournant autour d'un point central - comme une roue chromatique. Chaque type a des cas d'usage et des effets visuels différents.
Oui. Toute la génération de dégradés se fait à 100 % côté client dans votre navigateur en JavaScript. Vos choix de couleurs ne sont jamais envoyés à un serveur, jamais stockés et jamais transmis où que ce soit. Le générateur de dégradés de couleur est totalement privé et sûr pour les projets clients.
Oui. Le générateur de dégradés de couleur est 100 % gratuit, sans inscription, sans fonctionnalité premium et sans limite d'utilisation. Générez un nombre illimité de dégradés sans restriction ni coût caché.
L'option de répétition remplace la fonction de dégradé par repeating-linear-gradient, repeating-radial-gradient ou repeating-conic-gradient. Cela répète le motif du dégradé sur toute la largeur de l'élément, créant des effets rayés ou à motifs. La taille du motif est déterminée par les positions de vos arrêts de couleur.
Pour créer un bord net entre deux couleurs, placez deux arrêts de couleur adjacents à la même position. Par exemple, si l'arrêt A est à 50 % et l'arrêt B aussi à 50 %, le dégradé passera brusquement de la couleur A à la couleur B à cet endroit, sans aucun mélange.
Oui. Copiez la valeur du dégradé et utilisez-la dans une classe à valeur arbitraire Tailwind : bg-[linear-gradient(to_right,#6366f1,#ec4899)]. Remplacez les espaces par des traits de soulignement dans les valeurs arbitraires Tailwind. Vous pouvez aussi ajouter le dégradé dans votre tailwind.config.js sous theme.extend.backgroundImage.
Le générateur de dégradés de couleur prend en charge jusqu'à 10 arrêts de couleur par dégradé. Le CSS lui-même n'impose aucune limite stricte au nombre d'arrêts, mais les dégradés de plus de 10 arrêts sont rarement nécessaires en pratique. Vous pouvez supprimer des arrêts jusqu'à un minimum de 2.
Oui. Les dégradés linéaires et radiaux sont pris en charge par tous les navigateurs modernes sans préfixe vendeur. Les dégradés coniques sont pris en charge par Chrome 69+, Firefox 83+, Safari 12.1+ et Edge 79+. Pour les navigateurs plus anciens, prévoyez une couleur unie de repli avant la déclaration du dégradé.