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

°

Sortie CSS

 
  
 
Règle complète
 
 
 
 
 
   
 
 
 
Comment l'utiliser
 
     
  1. Choisissez un type de dégradé — Linéaire, Radial ou Conique.
    2.  
  2. Choisissez les couleurs — Cliquez sur le canevas de couleur ou saisissez des valeurs HEX/RGB. Faites glisser les arrêts sur la barre pour définir leurs positions.
    3.  
  3. Affinez — Ajustez l'angle, ajoutez jusqu'à 5 arrêts de couleur ou réglez la transparence alpha.
    4.  
  4. Copiez & collez — Cliquez sur « Copier le CSS » et insérez-le dans votre feuille de style.
    5.  
 
 
 
Qu'est-ce qu'un dégradé CSS ?
 
Un dégradé CSS crée des transitions de couleur fluides directement dans le navigateur — sans fichier image. Défini avec background ou background-image, un dégradé est rendu comme un vecteur indépendant de la résolution qui reste net sur tout écran.
 
Trois types existent : Linéaire (ligne droite), Radial (circulaire/elliptique) et Conique (balayage en roue chromatique). Tous sont pris en charge par les navigateurs modernes sans préfixe propriétaire.
 
 
 
Cas d'usage courants
 
 
Arrière-plans de sections hero
 
États survol de boutons
 
Effets de profondeur de cartes
 
Barres de progression
 
Superpositions d'images
 
Séparateurs de sections
 
 
Conseils & bonnes pratiques
 
 
 Restez simple 
2 à 3 arrêts de couleur donnent les résultats les plus nets. Au-delà de 4, le rendu devient chargé.
 
 
 L'angle compte 
Essayez 135deg ou 150deg plutôt que 90deg plat pour un effet plus dynamique et naturel.
 
 
 La sobriété gagne 
Les dégradés à faible contraste avec des teintes proches font d'excellents arrière-plans qui ne concurrencent pas votre contenu.
 
 
 Animez-le 
Combinez avec background-size et background-position pour des dégradés animés fluides.
 
 
 
Questions fréquentes
 
 
Les dégradés CSS fonctionnent-ils dans tous les navigateurs ?
 
Oui. Les dégradés linéaires, radiaux et coniques sont entièrement pris en charge par Chrome, Firefox, Safari et Edge. Aucun préfixe propriétaire requis.
 
 
 
Puis-je utiliser la transparence dans un dégradé ?
 
Oui. Utilisez le curseur alpha pour réduire l'opacité. Cela crée des effets de fondu couramment utilisés pour les masques de superposition sur les images.
 
 
 
Quelle différence entre linéaire et radial ?
 
Les dégradés linéaires s'écoulent en ligne droite selon n'importe quel angle. Les dégradés radiaux s'étendent vers l'extérieur depuis un point central, en forme circulaire ou elliptique.
 
 
 
Comment faire un dégradé en arrière-plan pleine page ?
 
Appliquez le dégradé à body avec min-height: 100vh et background-attachment: fixed pour le garder fixe pendant le défilement.
 
 
 
Peut-on animer un dégradé CSS ?
 
Pas directement. Mais vous pouvez animer background-position sur un dégradé surdimensionné, ou utiliser @property (CSS Houdini) pour une vraie animation des arrêts de couleur.