Créez des dégradés linéaires, radiaux et coniques avec des arrêts illimités, une interpolation OKLCH et une sortie utilitaire Tailwind v4. Aperçu en direct, plus de 30 préréglages, dans votre navigateur.
Linéaire mélange le long d'une ligne droite à un angle choisi (0° = vers le haut, 90° = vers la droite). Radial mélange depuis un point central vers l'extérieur — cercle ou ellipse, avec des mots-clés de taille comme farthest-corner. Conique tourne autour d'un point central — les arrêts de couleur se placent à des angles comme les aiguilles d'une horloge. Le conique est idéal pour les camemberts, les cadrans et les arrière-plans synthétiques de type color-wheel.
Lors de transitions entre teintes non analogues — par exemple bleu → jaune, ou rouge → vert. L'interpolation sRGB par défaut passe par un point médian gris boueux; OKLCH (CSS Color Module 4 in oklch) garde le point médian vif car il interpole dans un espace perceptuellement uniforme. Pour des dégradés à deux arrêts entre teintes similaires, la différence est faible. Pour des dégradés multi-arrêts ou couvrant une large plage de teintes, OKLCH est nettement supérieur.
Linéaire / radial / conique, lissage OKLCH, compatible Tailwind — et quelques petites touches qui le rendent vraiment agréable à utiliser.
Linéaire avec un angle de 0 à 360°, radial avec cercle/ellipse + taille + position, conique avec angle de départ + position. Tous produisent une syntaxe conforme à CSS Images Module Level 4.
Ajoutez des arrêts à n'importe quel pourcentage, glissez le curseur de position pour ajuster finement, cliquez sur l'échantillon pour choisir une couleur ou collez un HEX. Les arrêts sont triés automatiquement à la sortie. Cliquez sur la × pour supprimer (minimum 2 arrêts).
Basculez entre l'interpolation sRGB par défaut et l'interpolation moderne in oklch. OKLCH offre des points médians perceptuellement plus lisses — sans bandes grisâtres entre les sauts de teinte. Repli gracieux sur les navigateurs n'ayant pas encore implémenté CSS Color 4.
Trois panneaux de sortie se mettent à jour en direct : CSS brut (background-image: linear-gradient(...)), utilitaire à valeur arbitraire Tailwind v4 (bg-[linear-gradient(...)]) et un extrait de token de design JSON prêt pour Style Dictionary ou Figma Tokens.
Sunset, Ocean, Aurora, Cyber, Royal, Neon Pink, Iris, Bullseye, Conic Wheel — cliquez pour charger et ajuster. Chaque préréglage est un véritable point de départ de qualité production, pas juste un nom.
Aperçu rendu avec background-image natif, ce que vous voyez est exactement ce que produit votre feuille de style. Chaque pixel s'exécute localement — ouvrez DevTools → Network et vérifiez zéro requête sortante.
Quatre étapes pour passer d'une page blanche à un CSS, Tailwind ou JSON prêt pour la production.
Linéaire pour les arrière-plans, en-têtes, sections hero. Radial pour les projecteurs, vignettes, boutons lumineux. Conique pour les camemberts, roues chromatiques et arrière-plans synthétiques tendance. Basculez entre eux avec les onglets — vos arrêts de couleur sont conservés lors du changement.
Cliquez sur l'échantillon de couleur pour ouvrir un sélecteur, ou collez un HEX directement dans le champ. Glissez le curseur pour définir la position de l'arrêt entre 0 et 100%. Cliquez sur + Ajouter un arrêt pour insérer un nouvel arrêt dans le plus grand intervalle (avec une couleur médiane). Jusqu'à 12 arrêts au total.
Pour le linéaire, définissez l'angle (0° pointe vers le haut, 90° vers la droite). Pour le radial, choisissez la forme, le mot-clé de taille et la position du centre. Pour le conique, définissez l'angle de départ. Basculez l'interpolation des couleurs sur OKLCH pour des points médians perceptuellement lisses sur les dégradés multi-teintes.
Trois panneaux se mettent à jour en direct : CSS (background-image:...), Tailwind v4 (bg-[...]), JSON (forme de token de design). Utilisez l'icône de copie sur chacun, ou cliquez sur Télécharger le CSS pour enregistrer un fichier gradient.css prêt à intégrer dans un projet.
Quatre scénarios courants où un outil de navigateur axé sur la confidentialité bat l'ouverture de Figma + un site de dégradés séparé.
Choisissez un préréglage proche de votre marque, déposez vos deux couleurs de marque dans les arrêts, basculez sur l'interpolation OKLCH pour un point médian propre. Copiez le CSS, collez-le dans la feuille de style de votre hero. Temps total : moins de 2 minutes.
Construisez un dégradé de marque à 3 arrêts une fois, copiez-le sous forme de token de design JSON, déposez-le dans Style Dictionary / Figma Tokens. Désormais chaque bouton + carte sur chaque plateforme utilise le même dégradé par référence. Mettez à jour à un seul endroit, ça se propage partout.
Les dégradés coniques synthétiques sont parfaits pour les visuels de camembert, les cadrans de progression ou les états « data-loading » scintillants. Choisissez le type conique, définissez l'angle de départ, déposez les arrêts aux bons pourcentages — les calculs font correspondre exactement les angles 0-360° aux positions en pourcentage.
Construisez le dégradé, réglez le format pour correspondre à votre cible (16:9 pour les diapositives, 1:1 pour IG, 3:1 pour l'en-tête X), faites une capture de l'aperçu. Ou copiez le CSS dans un fichier HTML ponctuel et capturez dans votre navigateur à la taille en pixels exacte dont vous avez besoin.
Vos couleurs et dégradés ne quittent jamais votre appareil. Ouvrez DevTools → Network et vous verrez zéro requête sortante pendant toute opération.
background-image CSS natif — donc le dégradé rendu correspond exactement à ce que produira votre feuille de style dans les navigateurs de vos utilisateurs.
Lectures sélectionnées sur les dégradés CSS, l'interpolation OKLCH et les systèmes de tokens de design.
Why OKLCH replaces HSL for design systems: perceptual lightness, predictable chroma, wide-gamut support.
From sRGB linearization to relative luminance — every step of the contrast formula, with worked examples.
Linéaire mélange le long d'une ligne droite à un angle choisi (0° = vers le haut, 90° = vers la droite). Radial mélange depuis un point central vers l'extérieur — cercle ou ellipse, avec des mots-clés de taille comme farthest-corner. Conique tourne autour d'un point central — les arrêts de couleur se placent à des angles comme les aiguilles d'une horloge. Le conique est idéal pour les camemberts, les cadrans et les arrière-plans synthétiques de type color-wheel.
Lors de transitions entre teintes non analogues — par exemple bleu → jaune, ou rouge → vert. L'interpolation sRGB par défaut passe par un point médian gris boueux; OKLCH (CSS Color Module 4 in oklch) garde le point médian vif car il interpole dans un espace perceptuellement uniforme. Pour des dégradés à deux arrêts entre teintes similaires, la différence est faible. Pour des dégradés multi-arrêts ou couvrant une large plage de teintes, OKLCH est nettement supérieur.
Un utilitaire à valeur arbitraire que vous pouvez coller directement dans JSX / Blade / HTML : bg-[linear-gradient(45deg,#ff6b6b_0%,#feca57_50%,#ff9ff3_100%)]. Aucune modification de tailwind.config.js nécessaire; fonctionne sur tout projet Tailwind 4. Si vous préférez des tokens de couleur nommés, copiez plutôt le CSS et convertissez à la main.
Les dégradés linéaires et radiaux sont universellement pris en charge depuis 2014. Les dégradés coniques sont arrivés dans tous les navigateurs evergreen en 2021. Le mot-clé d'interpolation in oklch est pris en charge dans Chrome 111+, Safari 16.2+, Firefox 113+. Si vous devez prendre en charge d'anciens navigateurs, utilisez l'interpolation sRGB par défaut — la différence visuelle compte surtout pour les dégradés multi-arrêts à sauts de teinte.
Non. La génération de la chaîne de dégradé, la sérialisation CSS / Tailwind / JSON et l'aperçu en direct s'exécutent tous en JavaScript sur votre appareil. Ouvrez DevTools → Network et vous verrez zéro requête sortante pendant toute opération. Collez des couleurs de marque, des tokens internes — rien ne quitte votre ordinateur.