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

Créez un dégradé linéaire, radial ou conique avec jusqu’à huit arrêts, copiez le CSS avec repli sRGB et exportez une PNG ou une SVG.

Comment copier le CSS

1
Choisissez vos couleurs et positions d’arrêt
Commencez avec deux arrêts et montez jusqu’à huit. Chaque arrêt accepte une valeur de couleur saisie au clavier et une position saisie en pour cent. Vous fixez des nombres précis au lieu de pousser un curseur à la souris.
2
Choisissez linéaire, radial ou conique
Réglez l’angle pour un dégradé linéaire ou conique, la forme et le centre pour un dégradé radial, et indiquez si l’ensemble se répète. L’aperçu se met à jour immédiatement.
3
Copiez le CSS ou téléchargez une PNG
Le CSS est fourni sous forme de deux déclarations : un repli sRGB et, au-dessus, la version moderne interpolée. Vous pouvez aussi exporter le même dégradé en PNG à n’importe quelle taille jusqu’à 4 096 pixels, ou en SVG.

Pourquoi interpoler en OKLCH

Un dégradé du bleu vers le jaune en sRGB simple passe par un gris terne au milieu. Ce n’est pas un bug de votre navigateur : la moyenne composante par composante des canaux rouge, vert et bleu annule la chroma exactement là où l’œil attend un vert franc. OKLCH est un espace perceptuel : les mêmes deux extrémités produisent un point médian qui reste saturé et une rampe dont la luminosité augmente régulièrement. Le CSS moderne permet d’indiquer dans quel espace interpoler, par exemple avec « linear-gradient(90deg in oklch, ...) », et ce générateur utilise cet espace par défaut, avec oklab, sRGB et HSL disponibles si vous voulez l’aspect plus ancien.

Pourquoi le repli compte plus qu’il n’y paraît

Un navigateur qui ne comprend pas « in oklch » n’ignore pas seulement ce mot, il rejette toute la déclaration. Sans repli, le résultat n’est pas un dégradé légèrement différent mais aucun dégradé, et la couleur d’arrière-plan en dessous réapparaît. Le CSS copié contient donc toujours deux lignes « background-image ». La première est le repli : seize arrêts intermédiaires calculés ici dans l’espace choisi et écrits en hexadécimal sRGB simple, ce qui approche suffisamment bien la même courbe pour que la plupart des gens ne voient pas de différence. La seconde est la version moderne en une seule ligne, que tout navigateur compatible applique par-dessus.

Dégradés répétitifs et cas particulier conique

Un dégradé répétitif répète la séquence d’arrêts encore et encore, ce qui ne fonctionne que si le dernier arrêt est en dessous de 100 %. Sinon, il ne reste rien à répéter et le résultat est identique à la version simple. Ce cas est détecté avant que vous ne copiez quoi que ce soit. Les dégradés coniques ont une limite propre à l’export : SVG 1.1 ne définit aucun élément de dégradé conique, donc le bouton SVG l’indique et vous oriente vers la PNG, qui est dessinée sous forme de 720 secteurs d’un demi-degré pour rester compatible avec les anciennes versions de Safari.

Tout est calculé dans cet onglet

L’interpolation des couleurs, le texte CSS, le balisage SVG et la PNG sont tous produits localement en JavaScript et canvas. Rien de votre dégradé n’est envoyé sur un serveur, et aucune image n’est transmise ailleurs pour être générée. Fermez l’onglet et il ne reste rien.

Questions fréquentes

Pourquoi interpoler un dégradé en OKLCH ?

Parce que l’interpolation en sRGB désature le milieu d’un dégradé entre des teintes éloignées, ce qui produit une bande grise. OKLCH est perceptuellement uniforme : le point médian garde sa chroma et la rampe de luminosité paraît régulière.

Pourquoi ai-je besoin de la ligne de repli ?

Un navigateur qui ne gère pas la syntaxe « in <space> » rejette toute la déclaration, pas seulement la partie inconnue. Le repli est une approximation sRGB simple écrite en premier, pour que ces navigateurs aient eux aussi un dégradé.

Comment créer un dégradé répétitif ?

Activez l’option répétitive et placez le dernier arrêt en dessous de 100 %, par exemple à 20 %. La séquence d’arrêts se répète alors sur tout l’élément. Avec le dernier arrêt à 100 %, il n’y a rien à répéter, et l’outil vous le signale au lieu de produire un résultat identique sans avertissement.

Pourquoi n’y a-t-il pas de SVG pour un dégradé conique ?

SVG 1.1 ne définit que des dégradés linéaires et radiaux, sans élément conique. Simuler un conique avec des centaines de secteurs donnerait un fichier impossible à modifier, donc l’export SVG est refusé pour les coniques et la PNG est proposée à la place.

Puis-je créer un dégradé qui se termine en transparent ?

Oui. Utilisez une notation de couleur qui inclut un canal alpha, comme un hexadécimal à huit chiffres ou rgba(), pour l’arrêt qui doit disparaître. Le CSS comme la PNG conservent la transparence.

À quelle taille télécharger un arrière-plan ?

Pour un arrière-plan plein écran, 1 920 pixels de large suffisent en général, et les dégradés se compressent très bien. Au-delà de 2 048 pixels, cela ne vaut la peine que pour l’impression. Pour le web, préférez le CSS : quelques centaines d’octets, et une mise à l’échelle à n’importe quelle taille.

Safari prend-il en charge ces dégradés ?

Safari 16.4 et versions ultérieures comprennent les espaces d’interpolation. Les versions plus anciennes utilisent la ligne sRGB de repli, qui est précisément là pour cela. Les dégradés coniques en CSS sont pris en charge depuis Safari 12.1, et l’export PNG les dessine en secteurs pour que même les versions plus anciennes les affichent correctement.