Dégradé
Embed This Widget
Add the script tag and a data attribute to embed this widget.
Embed via iframe for maximum compatibility.
<iframe src="https://colorfyi.com/iframe/glossary/gradient/" width="420" height="400" frameborder="0" style="border:0;border-radius:10px;max-width:100%" loading="lazy"></iframe>Paste this URL in WordPress, Medium, or any oEmbed-compatible platform.
https://colorfyi.com/glossary/gradient/Add a dynamic SVG badge to your README or docs.
[](https://colorfyi.com/glossary/gradient/)Use the native HTML custom element.
Une transition douce et continue entre deux couleurs ou plus sur un espace défini.
Gradients can be linear (transitioning along a straight line), radial (transitioning outward from a center point), or conic (transitioning around a center point). In CSS, they are implemented as background-image values using linear-gradient(), radial-gradient(), and conic-gradient() functions. Gradients add depth, dimension, and visual interest to designs. Modern design trends favor subtle gradients for backgrounds and bold, multicolor gradients for branding (as seen with Instagram and Firefox). When creating gradients between certain color pairs, desaturated or muddy midpoints can occur; using OKLCH interpolation helps maintain vivid colors throughout the transition.
Essayez
Générateur de palettes
Générez des palettes de couleurs harmonieuses en utilisant des schémas complémentaires, analogues, triadiques et complémentaires divisés.
Générateur de nuances
Générez des échelles de nuances style Tailwind CSS (50–950) à partir de n'importe quelle couleur de base pour les systèmes de design.
Articles associés
CSS color-mix() : mélanger des couleurs nativement dans le navigateur
Apprenez à utiliser CSS color-mix() pour mélanger des couleurs nativement dans le navigateur. Maîtrisez la syntaxe, les espaces colorimétriques, les cas d'usage pratiques et créez des palettes dynamiques sans JavaScript.
Créer un sélecteur de couleur Web Component from scratch
Créez un sélecteur de couleur accessible en tant que Web Component. Implémentez le rendu canvas, les curseurs de teinte, les canaux alpha et les événements personnalisés avec Shadow DOM.
Espaces colorimétriques perceptuels : Lab, LCH, Oklab, OKLCH
Explorez les espaces colorimétriques perceptuellement uniformes — CIE Lab, LCH, Oklab et OKLCH. Apprenez comment chacun a été conçu, ses points forts et lequel utiliser pour le CSS et le travail de design.
Générer des images OG colorées avec Next.js et Satori
Générez des images Open Graph dynamiques avec Next.js et Satori. Créez des templates OG adaptés aux couleurs avec dégradés, couleurs de marque et designs adaptatifs.
La séparation des couleurs expliquée : préparer les fichiers pour l'impression
Comprenez la séparation des couleurs CMJN, les plaques de tons directs, le recouvrement et les repères de repérage. Préparez des fichiers prêts à imprimer avec des séparations de couleurs correctes.
Couleurs de Marque Chainlink : Le Bleu Oracle et l'Hexagone
Explorez le bleu distinctif de Chainlink (#375BD2) et le symbolisme du logo hexagonal. Découvrez comment l'identité visuelle d'un réseau oracle construit la confiance des entreprises dans l'infrastructure DeFi.