jquery.app
Francais
EnglishDeutschFrancaisEspanol日本語Nederlands

Outils CSS

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

Créez des dégradés CSS linéaires, radiaux et coniques avec un aperçu en direct qui se met à jour lorsque vous ajustez les couleurs, les positions et l'angle. Prend en charge jusqu'à trois points de couleur avec des pourcentages de position et un mode de répétition facultatif. L'outil génère une propriété CSS background prête à l'emploi avec une syntaxe neutre correcte. Aucun logiciel de conception nécessaire.

Chargement de l'outil...

Qu'est-ce que Générateur de Dégradé CSS ?

Le Générateur de Dégradé CSS est un outil visuel pour créer des arrière-plans de dégradé CSS sans mémoriser la syntaxe. Vous choisissez le type de dégradé (linéaire, radial ou conique), sélectionnez les couleurs et leurs positions, et ajustez l'angle. Un aperçu en direct montre le dégradé en temps réel. L'outil produit une propriété CSS background propre que vous pouvez coller directement dans votre feuille de style.

Réponse rapide

Créez des dégradés CSS linéaires, radiaux et coniques visuellement avec un aperçu en direct. Ajoutez jusqu'à trois points de couleur avec des pourcentages de position, ajustez l'angle et activez le mode de répétition. Copiez la propriété CSS background directement.

Last updated: 2026-06-11

Limites

  • Cet outil prend en charge trois points de couleur pour simplifier.
  • Les dégradés radiaux sont générés uniquement sous forme circulaire.
  • L'outil ne génère pas de CSS avec préfixes vendeur (-webkit-, -moz-).

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Comment utiliser cet outil

  1. Sélectionnez le type de dégradé : Linéaire (ligne droite), Radial (circulaire depuis le centre) ou Conique (rotation de roue chromatique).
  2. Définissez l'angle pour contrôler la direction du dégradé. Pour linéaire, 0deg va du bas vers le haut.
  3. Choisissez deux ou trois couleurs et définissez leurs pourcentages de position 0% au début, 100% à la fin.
  4. Activez le dégradé répété pour une sortie à motifs. Copiez la propriété CSS background dans votre feuille de style.

A quoi il sert

  • Concevoir un arrière-plan de section hero moderne avec un dégradé diagonal bleu-violet à 135 degrés.
  • Créer un dégradé conique pour un diagramme circulaire ou une roue chromatique tournant autour d'un point central.
  • Construire un arrière-plan à motifs rayés en utilisant repeating-linear-gradient avec des positions de couleur serrées.

Cas d'usage

Exemples concrets

Exemple

Arrière-plan hero de page d'accueil

Un développeur frontend ouvre le Générateur de Dégradé CSS, sélectionne Linéaire à 135 degrés et trois couleurs de marque : bleu (#3b82f6) à 0%, violet (#8b5cf6) à 50% et rose (#ec4899) à 100%. L'aperçu montre le dégradé diagonal en temps réel.

Exemple

Vignette de carte

Un designer UI a besoin d'une vignette radiale subtile derrière un composant carte. Il sélectionne le dégradé Radial, définit un bleu clair à 0% (centre) avec transition vers le blanc à 100% (bords).

Erreurs frequentes

  • Oublier de définir une couleur d'arrière-plan de secours pour les navigateurs qui ne supportent pas les dégradés.
  • Utiliser des couleurs avec un faible contraste entre les points.
  • Placer tous les points à la même position – cela crée des lignes dures au lieu de transitions douces.

Vérification

  1. Réglez le type sur Linéaire, l'angle sur 90deg et ajoutez trois points. Vérifiez que le résultat commence par linear-gradient(90deg.
  2. Passez au dégradé Radial, deux points, répétition activée. Vérifiez repeating-radial-gradient.

FAQ

Questions sur Générateur de Dégradé CSS

Quelle est la différence entre les dégradés linéaires, radiaux et coniques ?

Les dégradés linéaires transitionnent les couleurs le long d'une ligne droite définie par un angle. Les dégradés radiaux se propagent depuis un point central. Les dégradés coniques tournent autour d'un point central comme une roue chromatique.

Que fait l'option de dégradé répété ?

Un dégradé répété répète le motif des points de couleur. Par exemple, repeating-linear-gradient(90deg, red, blue 20px) produit des bandes alternées de 20px.

Puis-je utiliser plus de trois points de couleur ?

Cet outil prend en charge jusqu'à trois points de couleur. Pour des dégradés plus complexes, copiez le CSS généré et ajoutez manuellement d'autres paires couleur-position.

Outils lies

Autres outils outils css

A essayer aussi

A essayer aussi