Puis-je créer des dégradés radiaux et coniques en plus des linéaires ?

Oui. Utilisez le sélecteur de type en haut pour passer entre linéaire, radial et conique. Les réglages correspondants au type choisi s'affichent.

Puis-je ajouter plus de 2 arrêts de couleur ?

Oui. Cliquez sur le bouton + pour ajouter des arrêts (jusqu'à 10). Chaque arrêt a son sélecteur, sa saisie HEX et son curseur de position. Cliquez sur × pour supprimer un arrêt — il en reste toujours au moins 2.

Puis-je modifier l'angle et la position du centre ?

Oui. Le curseur d'angle définit la direction d'un dégradé linéaire (0–360°). Les curseurs X/Y définissent le centre des dégradés radiaux et coniques. Les radiaux ont aussi des options de forme et de taille.

Puis-je copier le CSS généré directement ?

Oui. La zone de sortie affiche une ligne CSS complète (ou une classe Tailwind). Cliquez sur Copier et collez-la dans votre projet. Les valeurs sont toujours au format compatible CSS.

Fonctionne-t-il avec Tailwind CSS ?

Oui. Passez en mode Tailwind pour obtenir une classe bg-[...] en valeur arbitraire. Ajoutez-la à l'attribut class de votre élément HTML.

Puis-je créer des dégradés semi-transparents (rgba) ?

Oui. Réduisez le curseur d'opacité (alpha) d'un arrêt en dessous de 100% pour le rendre semi-transparent. La sortie passe automatiquement en rgba() pour cet arrêt.

Les données de couleur sont-elles envoyées à un serveur ?

Non. La génération du dégradé, l'analyse des couleurs et la construction du CSS se font entièrement dans le navigateur. Les couleurs et le CSS généré ne sont jamais transmis ni stockés.

Générateur de dégradé — CSS linéaire, radial et conique multicolore (gratuit)

Type de dégradé

Arrêts de couleur

Position 0%

Opacité (alpha) (100%)

Position 100%

Opacité (alpha) (100%)

Au moins 2 arrêts de couleur sont requis.

Angle (90°)

deg

Préréglages

Sortie CSS

Format de sortie

Format de couleur

background: linear-gradient(90deg, #7C3AED 0%, #3B82F6 100%);

Outils externes associés

Certains liens sont des liens d'affiliation.

Adobe Creative CloudSuite d'apps créatives CanvaDesign graphique facile

Outils associés

Générateur de Palette de CouleursGénérez des palettes de couleurs harmonieuses à partir d'un HEX de base avec des schémas complémentaire, analogue, triadique et plus. Verrouillez des couleurs, régénérez le reste et exportez en CSS, Tailwind ou JSON.Convertisseur de CouleurConvertissez n'importe quelle couleur entre HEX, RGB, HSL, HSV et RGBA à la fois. Modifiez une valeur, copiez en un clic, avec alpha et contraste WCAG.Extracteur de Couleurs d'ImageExtrayez la palette de couleurs dominantes de n'importe quelle image dans votre navigateur, sans rien envoyer. Obtenez HEX, RGB et pourcentage (%) de chaque couleur, choisissez le nombre et exportez en CSS/JSON.Outil d'association de policesTrouvez les meilleures combinaisons Google Fonts titre × corps, prévisualisez-les en temps réel et copiez le CSS en un clic.

Ce générateur de dégradé CSS gratuit prend en charge trois types — linéaire, radial et conique — avec autant d'arrêts de couleur que vous le souhaitez. Choisissez les couleurs avec le sélecteur ou saisissez un code HEX, puis ajustez leur position à l'aide des curseurs pour un aperçu instantané en grand format. Contrôlez l'angle (linéaire), la forme/taille/centre (radial) ou l'angle de départ/centre (conique). Copiez ensuite la valeur background CSS ou Tailwind en un clic. Aucune installation ni inscription requise — tout fonctionne dans le navigateur.

Comment utiliser

Choisissez le type de dégradé : linéaire, radial ou conique.
Modifiez les arrêts de couleur : cliquez sur le sélecteur de couleur ou saisissez un code HEX, puis ajustez la position avec le curseur (0–100%).
Ajoutez des arrêts avec le bouton + (jusqu'à 10) et supprimez-les avec le bouton ×. Il y a toujours au moins 2 arrêts.
Ajustez les paramètres spécifiques au type : angle (linéaire), forme/taille/centre (radial), angle de départ/centre (conique).
Partez d'un préréglage ou explorez avec le bouton aléatoire, puis affinez à votre goût.
Copiez la sortie CSS (ou Tailwind) en un clic et collez-la dans votre projet.

Types de dégradé

CSS propose trois fonctions de dégradé, chacune offrant un effet visuel différent. Cet outil prend en charge les trois.

Dégradé linéaire (linear-gradient)

Les couleurs évoluent en ligne droite dans une direction définie par un angle. 90° va de gauche à droite, 180° va de haut en bas (selon la spécification CSS). C'est le type le plus courant, idéal pour les arrière-plans hero, les boutons et les ornements de cartes.

Dégradé radial (radial-gradient)

Les couleurs rayonnent depuis un point central vers l'extérieur. Choisissez entre cercle et ellipse, définissez un mot-clé de taille et positionnez le centre. Idéal pour les effets de lumière et de lueur.

Dégradé conique (conic-gradient)

Les couleurs évoluent en rotation autour d'un point central. Définissez l'angle de départ et la position du centre. Parfait pour les roues chromatiques et les effets de camembert. conic-gradient est une fonctionnalité CSS relativement récente et peut ne pas être prise en charge par les navigateurs très anciens.

Fonctionnalités

Arrêts de couleur : ajouter, supprimer et positionner

Ajoutez jusqu'à 10 arrêts avec le bouton +, supprimez-les avec ×. Il y a toujours au moins 2 arrêts. Utilisez les curseurs de position (0–100%) pour placer précisément chaque arrêt. Placer deux arrêts au même endroit crée une transition nette (hard stop).

Angle, forme et position du centre

Pour les dégradés linéaires, le curseur d'angle (0–360°) définit la direction. Pour les radiaux, choisissez cercle ou ellipse, un mot-clé de taille et les positions X/Y du centre. Les coniques ont en plus un angle de départ et une position de centre.

Sélecteur de couleur et saisie HEX (avec alpha)

Chaque arrêt dispose d'un sélecteur de couleur natif et d'une saisie HEX. Le curseur d'opacité (alpha) permet de créer des arrêts semi-transparents, la sortie passant automatiquement en rgba(). Une saisie HEX invalide n'affecte pas les autres arrêts ni l'aperçu.

Grand aperçu en direct

Un grand aperçu en haut de page reflète instantanément le dégradé en cours. Il se met à jour sans délai, quelle que soit la modification effectuée.

Copie CSS instantanée (background, background-image ou Tailwind)

Choisissez le format de sortie et cliquez sur Copier : CSS complet background:, valeur seule background-image:, ou classe Tailwind bg-[...]. Les couleurs, angles et pourcentages sont toujours au format compatible CSS.

Préréglages et génération aléatoire

Cliquez sur un échantillon de préréglage pour l'appliquer instantanément. Utilisez le bouton aléatoire pour explorer de nouveaux dégradés. Les deux servent de point de départ créatif.

Cas d'utilisation

Arrière-plans hero, boutons et ornements de cartes

Définissez un dégradé à 2–3 couleurs pour une section hero ou un bouton CTA, copiez le CSS et collez-le directement dans votre feuille de style. Les dégradés radiaux conviennent aussi aux effets de lueur derrière les cartes.

Coller directement dans CSS ou Tailwind

Choisissez la sortie background: pour l'utiliser dans une règle CSS. Si vous utilisez Tailwind, passez en mode Tailwind pour copier la classe bg-[linear-gradient(...)] et ajoutez-la à l'attribut class de votre élément HTML.

Dégradés coniques pour roues chromatiques et effets camembert

Avec des arrêts également espacés sur un dégradé conique, vous obtenez une roue chromatique ou un arrière-plan façon camembert. Placez 6 couleurs à 0%, 17%, 33%, 50%, 67% et 83% pour diviser un cercle en 6 secteurs.

Informations utiles

Direction des angles : 0° pointe vers le haut, 90° va de gauche à droite, 180° va de haut en bas — conforme à la spécification CSS. Vérifiez toujours avec l'aperçu.
Compatibilité navigateur : linear-gradient et radial-gradient sont pris en charge par tous les navigateurs modernes. conic-gradient est plus récent et peut ne pas fonctionner sur des navigateurs très anciens.
Positions omises réparties uniformément : si un arrêt n'a pas de position, le navigateur le répartit automatiquement entre les arrêts adjacents.
Dégradés semi-transparents : réduire l'alpha produit une sortie rgba(), permettant de superposer le dégradé sur une couleur ou une image de fond.
Les données de couleur ne sont pas envoyées au serveur. Tous les calculs se font dans le navigateur.

Foire aux questions

Puis-je créer des dégradés radiaux et coniques en plus des linéaires ?: Oui. Utilisez le sélecteur de type en haut pour passer entre linéaire, radial et conique. Les réglages correspondants au type choisi s'affichent.
Puis-je ajouter plus de 2 arrêts de couleur ?: Oui. Cliquez sur le bouton + pour ajouter des arrêts (jusqu'à 10). Chaque arrêt a son sélecteur, sa saisie HEX et son curseur de position. Cliquez sur × pour supprimer un arrêt — il en reste toujours au moins 2.
Puis-je modifier l'angle et la position du centre ?: Oui. Le curseur d'angle définit la direction d'un dégradé linéaire (0–360°). Les curseurs X/Y définissent le centre des dégradés radiaux et coniques. Les radiaux ont aussi des options de forme et de taille.
Puis-je copier le CSS généré directement ?: Oui. La zone de sortie affiche une ligne CSS complète (ou une classe Tailwind). Cliquez sur Copier et collez-la dans votre projet. Les valeurs sont toujours au format compatible CSS.
Fonctionne-t-il avec Tailwind CSS ?: Oui. Passez en mode Tailwind pour obtenir une classe bg-[...] en valeur arbitraire. Ajoutez-la à l'attribut class de votre élément HTML.
Puis-je créer des dégradés semi-transparents (rgba) ?: Oui. Réduisez le curseur d'opacité (alpha) d'un arrêt en dessous de 100% pour le rendre semi-transparent. La sortie passe automatiquement en rgba() pour cet arrêt.
Les données de couleur sont-elles envoyées à un serveur ?: Non. La génération du dégradé, l'analyse des couleurs et la construction du CSS se font entièrement dans le navigateur. Les couleurs et le CSS généré ne sont jamais transmis ni stockés.