Générateur de Dégradé CSS — Dégradés Linéaires et Radiaux

Générateur de Dégradé CSS — Concevez des Dégradés Visuellement

Créez de superbes dégradés CSS avec un éditeur visuel en direct. Ajoutez autant de points de couleur que vous voulez, choisissez des dégradés linéaires, radiaux ou coniques, ajustez l’angle et copiez le code CSS prêt à l’emploi. Parfait pour les arrière-plans, boutons, cartes et sections héros.

Types de dégradé

• Linéaire : les couleurs se fondent le long d’une ligne droite à n’importe quel angle (0–360°)
• Radial : les couleurs rayonnent depuis le centre, en cercle ou en ellipse
• Conique : les couleurs tournent autour d’un point central (idéal pour les roues chromatiques et effets camembert)

Fonctionnalités

• Points de couleur illimités : ajoutez ou supprimez des couleurs librement
• Contrôle de position : faites glisser chaque couleur de 0% à 100%
• Contrôle d’angle : faites pivoter précisément les dégradés linéaires et coniques
• Aperçu en direct : voyez votre dégradé se mettre à jour instantanément
• Bouton aléatoire : générez une nouvelle combinaison de couleurs pour l’inspiration
• Sortie CSS propre : copiez une seule ligne prête à coller

Comment utiliser le CSS

Copiez le code généré et appliquez-le à n’importe quel élément. Par exemple :

.hero {
  background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
}

Conseils

• Deux ou trois couleurs sont souvent plus élégantes que beaucoup
• Pour des arrière-plans subtils, utilisez des couleurs proches sur la roue chromatique
• Pour des effets vifs, utilisez des couleurs complémentaires
• Les dégradés coniques sont parfaits pour les spinners de chargement et sélecteurs de couleur

Confidentialité

Cet outil fonctionne entièrement dans votre navigateur. Rien n’est envoyé ni stocké.

Étape par étape

1. Choisissez le type : linéaire, radial ou conique.
2. Pour un dégradé linéaire, réglez l’angle ; pour un dégradé radial, la forme (cercle ou ellipse).
3. Ajoutez des points de couleur et déplacez-les. Le bouton Aléatoire donne de nouvelles idées.
4. Copiez le code avec Copier le CSS.

Questions fréquentes

Comment utiliser le code ?
Collez-le comme background ou background-image dans une règle CSS, par exemple pour le fond d’une section ou d’un bouton.

Qu’est-ce qu’un dégradé conique ?
Les couleurs tournent autour d’un point central, comme dans un graphique en secteurs ou un cercle chromatique.

Combien de points de couleur utiliser ?
Autant que vous voulez. Plus de points donnent plus de contrôle, mais rendent le résultat plus difficile à lire et à maintenir.