🌈

générateur dégradé CSS

Créez et prévisualisez des dégradés CSS linéaires et radiaux. Copiez le code CSS prêt à l’emploi.

Outils de design Fonctionne localement Aucune donnée envoyée
Dégradé CSS linéaire radial design
Type de dégradé
Direction
●
Arrêts de couleur
Sortie CSS

Qu'est-ce que le générateur dégradé CSS ?

Créez et prévisualisez des dégradés CSS linéaires et radiaux. Ajoutez des arrêts de couleur, choisissez la direction et copiez instantanément du code CSS prêt à l’emploi.

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

  1. Choisissez si vous voulez un dégradé linéaire ou radial.
  2. Ajoutez ou ajustez les arrêts de couleur jusqu’à ce que le mélange soit correct.
  3. Ajustez finement l’angle, la position ou l’étendue dans l’aperçu en direct.
  4. Copiez le CSS généré lorsque vous êtes prêt à l’utiliser dans votre projet.

Outils associés

🎨
générateur palette
Générez des palettes de couleurs complémentaires, analogues et triadiques
 🎨
sélecteur couleur
Convertissez les couleurs entre HEX, RGB, HSL et CMYK
 ⚖️
vérificateur contraste WCAG
Vérifiez les ratios de contraste des couleurs WCAG AA et AAA pour l'accessibilité
Comprendre les dégradés CSS ▾
Exemple
Entrée Linéaire, 90°, arrêts : #6366F1 → #8B5CF6
Sortie background: linear-gradient(90deg, #6366F1, #8B5CF6);
Cas d’utilisation courants
  • Créer des dégradés d'arrière-plan hero pour les pages marketing
  • Tester les réglages d'angle et d'arrêt avant de modifier les fichiers CSS
  • Générer des arrière-plans soignés pour boutons ou cartes
  • Partager le CSS exact du dégradé avec les développeurs sans conversion manuelle
Questions fréquentes
Ai-je besoin de préfixes propriétaires comme -webkit-linear-gradient ?

Non — tous les navigateurs modernes (Chrome, Firefox, Safari, Edge) prennent en charge les dégradés CSS sans préfixe. Les préfixes propriétaires ne sont nécessaires que pour les navigateurs très anciens (IE 9 et inférieurs).

Puis-je utiliser des arrêts de couleur transparents ?

Oui — utilisez des couleurs rgba() ou hsla() avec une valeur alpha de 0 pour créer des fondus vers la transparence. Par exemple : rgba(99, 102, 241, 0) fait disparaître l'indigo.

Puis-je utiliser ce dégradé sur du texte ?

Oui — copiez la valeur du dégradé et utilisez-la avec les propriétés CSS : background: linear-gradient(...); -webkit-background-clip: text; -webkit-text-fill-color: transparent;

Quel est le nombre maximal d'arrêts de couleur ?

Cet outil prend en charge jusqu'à 6 arrêts de couleur. CSS lui-même n'a pas de limite stricte — les navigateurs prennent en charge des dégradés avec des dizaines d'arrêts, bien que les performances puissent varier.