Générateur gratuit de dégradés CSS — Créez des dégradés linéaires, radiaux et coniques

Créez des dégradés CSS magnifiques avec ce générateur de dégradés en ligne gratuit. Choisissez parmi les types de dégradés linéaires, radiaux et coniques, personnalisez les couleurs et les angles, et copiez le code CSS instantanément.

Qu'est-ce qu'un dégradé CSS ?

Un dégradé CSS est une transition fluide entre deux ou plusieurs couleurs, créée à l'aide de la propriété background en CSS. Les dégradés éliminent le besoin de fichiers d'images, réduisant le temps de chargement des pages et permettant des fonds entièrement réactifs et indépendants de la résolution.

Il existe trois types principaux de dégradés CSS :

Les dégradés linéaires transforment les couleurs le long d'une ligne droite, définie par un angle ou une direction.
Les dégradés radiaux rayonnent à partir d'un point central, créant des motifs circulaires ou elliptiques.
Les dégradés coniques transforment les couleurs autour d'un point central en un balayage rotatif, similaire à une roue de couleurs.

Comment utiliser ce générateur de dégradés

Choisissez un type de dégradé — Sélectionnez Linéaire, Radial ou Conique en haut du panneau de contrôle.
Définissez la direction — Pour les dégradés linéaires et coniques, ajustez l'angle à l'aide du curseur ou des boutons de sélection rapide.
Personnalisez les options radiales — Pour les dégradés radiaux, choisissez une forme (cercle ou ellipse) et un mot-clé de taille.
Modifiez les points de couleur — Cliquez sur le sélecteur de couleur pour changer la couleur de chaque point. Glissez le curseur de position pour ajuster l'emplacement de chaque couleur.
Ajoutez ou supprimez des couleurs — Utilisez le bouton "Ajouter une couleur" pour ajouter davantage de points (jusqu'à 8), ou cliquez sur X pour supprimer un point (minimum 2).
Essayez un préréglage — Cliquez sur n'importe quel échantillon de préréglage pour charger un dégradé prédéfini.
Copiez le CSS — Cliquez sur "Copier le CSS" pour copier la propriété background complète dans votre presse-papiers.

Fonctionnalités clés

Fonctionnalité	Avantage
Trois types de dégradés	Linéaire, radial et conique — tous les modes de dégradés CSS sont pris en charge
Aperçu en temps réel	Voir votre dégradé se mettre à jour en temps réel pendant que vous ajustez les paramètres
Jusqu'à 8 points de couleur	Créer des dégradés multicouleurs complexes avec une position précise
Contrôle de l'angle	Curseur + boutons de sélection rapide pour les angles courants (0°–315°)
Forme et taille radiale	Formes cercle/ellipse avec quatre mots-clés de taille CSS
Préréglages d'un clic	Six dégradés prédéfinis pour démarrer rapidement
Copie du code CSS	Un clic pour copier le CSS prêt à la production dans votre presse-papiers
Aucune donnée envoyée	Tout se déroule dans votre navigateur — aucun serveur, aucun suivi

Comparaison des types de dégradés

Propriété	Linéaire	Radial	Conique
Direction	Angle (0–360°)	Forme + mot-clé de taille	Angle de départ
Motif	Ligne droite	Cercle ou ellipse à partir du centre	Balayage rotatif
Meilleur pour	Fonds, bannières, boutons	Spotlights, sphères, art abstrait	Diagrammes circulaires, roues de couleurs, horloges
Fonction CSS	`linear-gradient()`	`radial-gradient()`	`conic-gradient()`

Cas d'utilisation réels

Fonds de page du site web

Remplacez les couleurs plates par des dégradés subtils pour des pages modernes et professionnelles. Un dégradé linéaire doux de 135° avec deux couleurs proches ajoute de la profondeur sans distraire.

Boutons et CTAs

Faites ressortir les boutons de mise en avant avec des dégradés vifs. Utilisez un dégradé de 180° (du haut vers le bas) pour un effet naturel de lumière à ombre.

Sections d'accueil

Créez des bannières d'accueil percutantes avec des dégradés à plusieurs points. Combinez trois ou plus de couleurs pour un look de marque unique.

Surbrillages et cartes

Appliquez des dégradés semi-transparents sur des images pour assurer la lisibilité du texte tout en maintenant un intérêt visuel.

Visualisation de données

Utilisez des dégradés coniques pour créer des diagrammes circulaires simples, des anneaux de progression ou des roues de couleurs sans JavaScript ou SVG.

Conseils pour de meilleurs dégradés

Limitez à 2–3 couleurs pour des designs propres et professionnels. Plus de points peuvent fonctionner mais nécessitent un réglage soigneux.
Utilisez des teintes similaires pour des dégradés subtils (par exemple, bleu clair à bleu foncé) et des couleurs complémentaires pour des dégradés audacieux.
Adaptez votre angle au layout — 180° convient bien aux sections verticales, 90° aux barres horizontales.
Testez sur les thèmes sombres et clairs — Un dégradé qui semble parfait sur un fond blanc peut nécessiter des ajustements pour le mode sombre.
Utilisez background-size et background-repeat pour tiler de petits dégradés en motifs.
Combiner avec la transparence — Utilisez des valeurs rgba() pour créer des dégradés qui s'intègrent à du contenu sous-jacent.

Comprendre la syntaxe des dégradés CSS

Un dégradé linéaire de base :

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

Un dégradé radial avec forme et taille :

background: radial-gradient(circle farthest-corner, #667eea 0%, #764ba2 100%);

Un dégradé conique :

background: conic-gradient(from 0deg, #667eea 0%, #764ba2 50%, #667eea 100%);

Tous les navigateurs modernes prennent en charge ces types de dégradés sans préfixes de fournisseur.

Questions fréquemment posées

Combien de couleurs puis-je utiliser dans un dégradé CSS ?

Le CSS prend en charge un nombre quelconque de points de couleur. Ce outil permet jusqu'à 8 pour une utilisation pratique. Dans les projets réels, 2 à 4 points sont les plus courants.

Quelle est la différence entre les dégradés linéaires et radiaux ?

Les dégradés linéaires transforment les couleurs le long d'une ligne droite à un angle spécifié. Les dégradés radiaux transforment les couleurs à partir d'un point central en une forme circulaire ou elliptique.

Les dégradés CSS fonctionnent-ils dans tous les navigateurs ?

Oui. Tous les navigateurs modernes (Chrome, Firefox, Safari, Edge) prennent pleinement en charge linear-gradient, radial-gradient et conic-gradient sans préfixes de fournisseur.

Puis-je animer les dégradés CSS ?

Le CSS ne peut pas animer directement entre des valeurs de dégradé à l'aide de transitions. Cependant, vous pouvez animer la position du dégradé à l'aide de background-position ou utiliser la propriété CSS @property pour des animations de propriétés personnalisées dans les navigateurs pris en charge.

Comment faire un dégradé transparent ?

Utilisez des valeurs rgba() ou hsla() avec un canal alpha. Par exemple, rgba(102, 126, 234, 0.5) donne une version semi-transparente de la couleur.

Ce outil stocke-t-il mes données de dégradé ?

Non. La génération de dégradé se fait entièrement dans votre navigateur. Aucune donnée n'est envoyée vers un serveur.

Générateur de dégradés