Générateur de dégradés

Concevoir des dégradés linéaires, radiaux et coniques, et exporter du CSS ou une image

Les fichiers ne quittent pas votre appareil
S’exécute dans le navigateur
Gratuit, sans compte, sans filigrane

Color stops

Click the bar to add a stop. Drag handles to move them; arrow keys nudge, Delete removes.

Code

background: linear-gradient(135deg, #4f46e5 0%, #5d45e5 3.13%, #6a44e5 6.25%, #7643e3 9.38%, #8243e1 12.5%, #8d42de 15.63%, #9742db 18.75%, #a141d6 21.88%, #ab41d1 25%, #b541cc 28.13%, #be42c6 31.25%, #c642bf 34.38%, #cf42b8 37.5%, #d743b1 40.63%, #de44a9 43.75%, #e546a1 46.88%, #ec4899 50%, #f14b90 53.13%, #f54e87 56.25%, #f8527e 59.38%, #fb5775 62.5%, #fe5b6c 65.63%, #ff6063 68.75%, #ff665a 71.88%, #ff6c51 75%, #ff7247 78.13%, #ff783e 81.25%, #ff7e35 84.38%, #ff842b 87.5%, #fd8b21 90.63%, #fb9118 93.75%, #f89810 96.88%, #f59e0b 100%);
background: linear-gradient(in oklch 135deg, #4f46e5 0%, #ec4899 50%, #f59e0b 100%);

The first line is a fallback with precomputed stops for browsers without “in oklab/oklch” support.

Comment utiliser Générateur de dégradés

Construisez des dégradés linéaires, radiaux et coniques avec autant de points de couleur que vous voulez, mélangés en sRGB, OKLab ou OKLCH. Copiez le résultat en CSS, en classe Tailwind ou en SVG, ou téléchargez-le en image PNG, JPG ou WebP jusqu'à 8192 px de côté.

1
Choisissez un Type (Linéaire, Radial ou Conique) et réglez l'Angle, la Forme ou le centre ; pour le radial et le conique, vous pouvez faire glisser l'aperçu pour déplacer le centre.
2
Modifiez les Points de couleur : cliquez sur la barre pour en ajouter un, faites glisser les poignées pour les déplacer, et changez chaque couleur et chaque position dans la liste.
3
Choisissez comment Mélanger les couleurs (sRGB, OKLab ou OKLCH), ou partez de l'un des Préréglages ou d'Aléatoire.
4
Copiez le code depuis l'onglet CSS, Tailwind ou SVG.
5
Pour une image, réglez la Largeur et la Hauteur ou choisissez une taille, choisissez PNG, JPG ou WebP, puis cliquez sur Télécharger.

Questions fréquentes

Quelle est la différence entre les mélanges sRGB, OKLab et OKLCH ?

sRGB est le mélange CSS classique, où des couleurs complémentaires peuvent devenir grises au milieu. OKLab est perceptuellement régulier, sans milieux boueux. OKLCH garde les couleurs vives en tournant autour du cercle des teintes.

Les dégradés OKLab et OKLCH fonctionnent-ils dans les anciens navigateurs ?

La sortie CSS commence par une ligne de repli qui utilise des points précalculés pour les navigateurs sans prise en charge de « in oklab » ou « in oklch ». Le code SVG et les images téléchargées utilisent aussi des points précalculés, ils ont donc le même aspect partout.

Pourquoi l'onglet SVG est-il désactivé pour les dégradés coniques ?

Le SVG n'a pas de dégradé conique. Téléchargez plutôt une image PNG, JPG ou WebP.

Puis-je utiliser des points transparents ?

Oui, les couleurs avec alpha comme rgba() ou #rrggbbaa fonctionnent. Téléchargez en PNG ou WebP pour conserver la transparence, car le JPG n'a pas de canal alpha.

L'image est-elle produite sur un serveur ?

Non. L'image est dessinée sur un canevas dans votre navigateur et enregistrée directement, à n'importe quelle taille de 1 à 8192 px de côté.

Comment affiner un point au clavier ?

Placez le focus sur une poignée de point et utilisez les flèches pour le déplacer de 1 % (Maj pour 10 %), Début ou Fin pour sauter aux extrémités, et Suppr pour le retirer. Un dégradé conserve toujours au moins deux points.