Quels types de dégradés CSS puis-je créer ?

Dégradés linéaires, radiaux et coniques. Le linéaire fait la transition des couleurs le long d'une ligne droite avec un angle ajustable. Le radial fait la transition vers l'extérieur depuis un point central. Le conique fait la transition autour d'un point central comme une roue chromatique.

Puis-je copier le code CSS directement ?

Oui. La copie en un clic vous donne le code de dégradé CSS complet prêt à coller dans n'importe quelle feuille de style. Vous pouvez aussi exporter en syntaxe de valeur arbitraire Tailwind CSS ou en SVG.

Supporte-t-il plusieurs arrêts de couleur ?

Oui. Ajoutez autant d'arrêts de couleur que nécessaire avec un contrôle total de la position. Chaque arrêt peut être n'importe quelle couleur avec une position en pourcentage spécifique le long du dégradé.

Puis-je exporter les dégradés en images ?

Oui. Téléchargez votre dégradé en image PNG 1920x1080, parfaite pour les outils de design comme Figma, les arrière-plans de réseaux sociaux ou les fonds d'écran.

Ce générateur de dégradés est-il gratuit ?

Oui, entièrement gratuit sans limitations, sans inscription requise et sans filigrane sur les images exportées.

🌈 Linéaire · Radial · Conique · Export CSS

Générateur de Dégradés CSS

Créez des dégradés linéaires, radiaux et coniques visuellement. Ajoutez des arrêts de couleur, choisissez parmi des presets, exportez en CSS, configuration Tailwind ou SVG. Téléchargez en PNG 1920×1080.

Préréglages

Générateur de dégradés CSS — créez de beaux dégradés visuellement

Les dégradés CSS ont remplacé les images pour la plupart des tâches de conception d'arrière-plan — ils sont indépendants de la résolution, se chargent instantanément et peuvent être animés. Ce générateur vous offre un éditeur visuel pour les trois types de dégradés CSS avec aperçu en direct et sortie prête à copier pour CSS, Tailwind CSS et SVG.

Trois types de dégradé

Dégradé linéaire — transitions de couleurs le long d'une ligne droite. Contrôlez l'angle (0°–360°). Le plus courant pour les fonds hero, cartes et boutons.
Dégradé radial — transitions de couleurs vers l'extérieur depuis un point central. Crée des effets de projecteur ou de lueur circulaire.
Dégradé conique — transitions de couleurs autour d'un point central comme une roue chromatique. Utile pour les graphiques en camembert et les indicateurs de progression.

Formats d'export

CSS — la propriété background standard, prête à coller dans n'importe quelle feuille de style.
Tailwind CSS — utilise la syntaxe de valeur arbitraire : bg-[linear-gradient(...)].
SVG — un SVG autonome avec une définition linearGradient.
Téléchargement PNG — rend le dégradé sur un canvas 1920×1080 et télécharge en PNG. Utile pour les fonds de réseaux sociaux et les imports Figma.

Cas d'utilisation courants

Créer des fonds de section hero accrocheurs pour les pages d'atterrissage.
Générer des effets hover de boutons et des fonds de cartes.
Créer des progressions de couleurs de marque pour les présentations et les réseaux sociaux.
Exporter des fonds d'écran en dégradé pour bureau ou mobile.

Questions Fréquentes

Quels types de dégradés CSS puis-je créer ?: Dégradés linéaires, radiaux et coniques. Le linéaire fait la transition des couleurs le long d'une ligne droite avec un angle ajustable. Le radial fait la transition vers l'extérieur depuis un point central. Le conique fait la transition autour d'un point central comme une roue chromatique.
Puis-je copier le code CSS directement ?: Oui. La copie en un clic vous donne le code de dégradé CSS complet prêt à coller dans n'importe quelle feuille de style. Vous pouvez aussi exporter en syntaxe de valeur arbitraire Tailwind CSS ou en SVG.
Supporte-t-il plusieurs arrêts de couleur ?: Oui. Ajoutez autant d'arrêts de couleur que nécessaire avec un contrôle total de la position. Chaque arrêt peut être n'importe quelle couleur avec une position en pourcentage spécifique le long du dégradé.
Puis-je exporter les dégradés en images ?: Oui. Téléchargez votre dégradé en image PNG 1920x1080, parfaite pour les outils de design comme Figma, les arrière-plans de réseaux sociaux ou les fonds d'écran.
Ce générateur de dégradés est-il gratuit ?: Oui, entièrement gratuit sans limitations, sans inscription requise et sans filigrane sur les images exportées.

Générateur de Dégradés CSS

Préréglages

Générateur de dégradés CSS — créez de beaux dégradés visuellement

Trois types de dégradé

Formats d'export

Cas d'utilisation courants

Questions Fréquentes

Outils Associés

Extracteur de Couleurs

Embellisseur de Captures

Optimiseur d'Images