DevToolPal
FR

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

Créez visuellement des dégradés CSS linéaires, radiaux et coniques avec arrêts de couleur, angle et position, aperçu en direct, préréglages et CSS prêt à copier.

Traitement local, rien n'est envoyé

Dégradé

Type
Arrêts de couleur

Aperçu

CSS

Préréglages
CSS du dégradé
 
 
 
 
 
À quoi ça sert


Le générateur de dégradés CSS vous permet de composer un dégradé à l’œil puis de copier le CSS final. Choisissez un dégradé linéaire, radial ou conique, ajoutez autant d’arrêts de couleur que vous voulez, faites glisser leurs positions, réglez l’angle ou le centre, et l’aperçu se met à jour instantanément. Vous pouvez aussi coller un linear-gradient(…), radial-gradient(…) ou conic-gradient(…) existant pour le modifier visuellement. Tout se passe dans votre navigateur.


Mode d’emploi


    

  1. Partez d’un préréglage ou gardez le dégradé d’exemple.
    2. 

  2. Choisissez le Type. Les dégradés linéaires et coniques ont un angle ; les radiaux et coniques ont un centre que vous déplacez avec Centre X et Centre Y.
    3. 

  3. Modifiez les Arrêts de couleur : changez une couleur avec le sélecteur ou saisissez n’importe quelle couleur CSS, faites glisser Position pour la déplacer, utilisez + Ajouter un arrêt pour en insérer un dans le plus grand intervalle et Inverser pour retourner l’ordre.
    4. 

  4. Activez Répéter pour répéter le dégradé en mosaïque et créer rayures et anneaux.
    5. 

  5. Copiez le code depuis la carte CSS, éventuellement avec une couleur unie de secours pour les très vieux navigateurs.
    6. 



Le champ CSS du dégradé en bas affiche la valeur du dégradé et reste modifiable : collez un dégradé tiré de votre feuille de styles ou d’un outil de design, et les contrôles le reprennent.


Exemple


.hero {
  background-color: #667eea;
  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}


Conseils pour de beaux dégradés


    

  • Restez subtil. Deux teintes voisines (bleu vers violet, orange vers rose) donnent un rendu plus doux que des couleurs opposées, qui peuvent virer au gris boueux au milieu.
    • 

  • Ajoutez un arrêt intermédiaire pour contrôler le mélange. Un troisième arrêt un peu plus clair que ses voisins crée un reflet doux.
    • 

  • Les arrêts nets dessinent des formes. Des arrêts à la même position créent des bords francs : rayures, drapeaux, barres de progression et camemberts utilisent cette astuce.
    • 

  • Directions. to right équivaut à 90deg et to bottom (la valeur par défaut) à 180deg. Les angles se mesurent dans le sens horaire à partir du haut.
    • 

  • Le texte sur un dégradé doit rester lisible sur toute son étendue. Comparez les arrêts le plus clair et le plus foncé à la couleur du texte avec un vérificateur de contraste.
    • 

 
  
 
FAQ
 
 
  › Quelle différence entre dégradés linéaires, radiaux et coniques ?  
Un dégradé linéaire mélange les couleurs le long d’une droite orientée selon un angle. Un dégradé radial s’étend depuis un point central en cercle ou en ellipse. Un dégradé conique tourne autour d’un point central comme les aiguilles d’une montre, idéal pour les roues chromatiques et les camemberts.
 
  › Comment obtenir des bandes nettes plutôt qu’une transition douce ?  
Placez deux arrêts voisins à la même position, par exemple red 50% et blue 50%. La couleur change alors d’un coup à cet endroit. Activez Répéter pour répéter le motif : c’est ainsi qu’on crée des rayures en CSS.
 
  › Puis-je utiliser des couleurs transparentes ?  
Oui. Saisissez n’importe quelle couleur CSS dans un arrêt, y compris rgba(), hsl() avec alpha, un hexadécimal à 8 chiffres ou transparent. Le sélecteur conserve l’alpha choisi et l’aperçu affiche un damier derrière les zones transparentes.
 
  › Faut-il encore des préfixes ou une couleur de secours ?  
Aucun préfixe n’est nécessaire : tous les navigateurs actuels prennent en charge les dégradés linéaires, radiaux et coniques sans préfixe. La couleur unie de secours facultative ne sert que pour de très vieux navigateurs ou des outils qui lisent background-color, comme certains clients de messagerie.