Générateur de dégradé CSS
Choisissez linéaire, radial ou conique et ajoutez autant d'arrêts de couleur que vous le souhaitez. Faites glisser les poignées pour repositionner les arrêts sur la barre de dégradé, copiez le CSS ou téléchargez-le en SVG.
Comment utiliser ce générateur de dégradé
- Choisissez un type de dégradé : Linéaire, Radial ou Conique.
- Ajustez l'angle (linéaire), la forme et la position (radial) ou l'angle de départ (conique).
- Faites glisser les poignées rondes sur la barre de dégradé pour repositionner chaque arrêt de couleur, ou modifiez directement la couleur/le pourcentage.
- Ajoutez ou supprimez des arrêts librement. Copiez le CSS ou téléchargez-le en SVG.
Questions fréquentes
Quelle est la différence entre linéaire, radial et conique ?
Le linéaire progresse dans une direction (selon un angle). Le radial rayonne depuis un point (cercle ou ellipse). Le conique tourne autour d'un point comme une aiguille — idéal pour les roues chromatiques, les diagrammes circulaires et les motifs décoratifs en boucle.
Pourquoi mon dégradé conique en SVG semble-t-il différent ?
SVG ne prend pas en charge nativement les dégradés coniques. Le SVG téléchargé intègre le CSS via foreignObject, ce qui fonctionne dans les navigateurs mais pas dans tous les éditeurs SVG. Pour une compatibilité complète avec les éditeurs, utilisez linéaire ou radial.
Puis-je ajouter plus de 2 arrêts ?
Oui — il n'y a aucune limite. Cliquez sur « + Ajouter un arrêt » et le nouvel arrêt est automatiquement placé dans le plus grand espace disponible.
Pourquoi mon dégradé montre-t-il un effet de bandes visibles dans les zones sombres ?
Le banding apparaît lorsque le dégradé passe entre les couleurs plus vite que ce que 8 bits par canal peuvent afficher — fréquent dans les bleus et rouges sombres. Ajoutez une légère couche de bruit en CSS (opacité 1-2%), utilisez un écart de couleur plus grand entre les arrêts, ou passez aux dégradés OKLCH (CSS prend en charge `linear-gradient(in oklch, ...)` pour des transitions perceptuelles plus douces).