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

À propos des dégradés CSS

Les dégradés CSS permettent d'afficher des transitions fluides entre deux couleurs ou plus, sans utiliser d'images. Ils sont générés par le navigateur, ce qui signifie qu'ils s'adaptent parfaitement à toute résolution et n'ajoutent aucun poids au chargement de la page. Les dégradés sont définis via la propriété background avec les fonctions linear-gradient() ou radial-gradient().

Une brève histoire des dégradés CSS

Les dégradés CSS sont définis dans le CSS Image Values and Replaced Content Module Level 3, maintenu par le W3C CSS Working Group et édité par Tab Atkins Jr. et Elika J. Etemad entre autres. Le First Public Working Draft fut publié le 12 juillet 2011 ; la spec a atteint le statut Candidate Recommendation le 17 avril 2012, verrouillant la syntaxe moderne sans préfixe, y compris la convention selon laquelle 0deg pointe vers le haut et to right équivaut à 90deg. Ordre de livraison des navigateurs : WebKit en premier de loin, avec -webkit-gradient() utilisable dans Safari 4 (2009) selon une syntaxe à appels de fonction. Firefox a livré -moz-linear-gradient() dans Firefox 3.6 le 21 janvier 2010 ; Internet Explorer 10 a livré les formes sans préfixe en 2012 ; la syntaxe sans préfixe s'est stabilisée sur tous les moteurs majeurs fin 2013. conic-gradient() a été spécifié plus tard dans CSS Images Level 4, Lea Verou a rédigé la proposition en 2011, Tab Atkins l'a ajoutée à la spec en 2012, et la livraison native est arrivée dans Chrome 69 (4 septembre 2018), Safari 12.1 (25 mars 2019) et Firefox 83 (17 novembre 2020). En 2026, vous pouvez écrire background: linear-gradient(...) et background: radial-gradient(...) en toute confiance, sans préfixes ni fallbacks, pour tout navigateur qui mérite encore d'être supporté.

linear-gradient : angles, côtés et la subtilité diagonale

La grammaire formelle est linear-gradient([<angle> | to <side-or-corner>], <color-stop>, ...). La convention d'angles fait souvent trébucher les développeurs parce qu'elle diffère de la convention SVG/canvas. 0deg équivaut à to top, la ligne du dégradé pointe vers le haut, donc la dernière couleur apparaît en haut. 90deg équivaut à to right. 180deg équivaut à to bottom (le défaut si aucune direction n'est donnée). 270deg équivaut à to left. 135deg est la diagonale canonique, de haut-gauche à bas-droite, la direction de dégradé la plus courante en design web moderne. Les angles croissants tournent dans le sens horaire depuis le haut, opposé à la convention mathématique (où 0 est à droite et les angles croissent dans le sens antihoraire) et opposé au <linearGradient> de SVG. Une subtilité utile : to right et 90deg ne sont équivalents que sur les boîtes carrées. Sur une boîte non carrée, to top right produit une ligne de dégradé exactement perpendiculaire à la diagonale partant du coin bas-gauche, le dégradé touche donc le coin proprement, tandis que 45deg est toujours littéralement 45 degrés indépendamment du rapport d'aspect. Pour la plupart des arrière-plans de hero cette distinction n'a pas d'importance ; pour des designs précisément alignés elle peut en avoir.

radial-gradient : formes, tailles et position

La grammaire est radial-gradient([<shape> || <size>] [at <position>]?, <color-stop>, ...). Deux valeurs de forme : circle (cercle parfait mis à l'échelle de la boîte) et ellipse (défaut, étirée selon le rapport d'aspect de la boîte). La taille peut être l'un des quatre mots-clés d'extension ou des longueurs/pourcentages explicites. closest-side : la forme finale touche le côté le plus proche. closest-corner : la forme finale passe exactement par le coin le plus proche. farthest-side : la forme finale touche le côté le plus éloigné. farthest-corner (le défaut) : la forme finale passe par le coin le plus éloigné. La clause at <position> déplace le centre, at top left, at 30% 70%, etc. Le centre par défaut est at center center. Les dégradés radiaux servent à faire des effets de projecteur, des halos doux, des arrière-plans « vignette » où les bords s'assombrissent vers le noir, et des fonds de badges circulaires. Ils sont nettement moins courants que les dégradés linéaires dans l'usage de production 2026, la plupart des arrière-plans « dégradés » que vous voyez sur les pages de destination sont linéaires, mais ils sont indispensables là où le linéaire ne peut pas atteindre.

Color stops, le cœur d'un dégradé

Un color stop est une valeur de couleur avec une position optionnelle le long de la ligne du dégradé. linear-gradient(red, blue) place le rouge à 0% et le bleu à 100%, avec une interpolation lisse entre. linear-gradient(red 0%, yellow 50%, blue 100%) ajoute un stop jaune au milieu. Les stops avec positions explicites peuvent être placés n'importe où entre 0% et 100%, et les stops sans position explicite sont distribués uniformément entre leurs voisins à position explicite. Hard color stops, deux stops à la même position, comme linear-gradient(red 50%, blue 50%), produisent une transition instantanée plutôt qu'un mélange lisse. C'est l'astuce derrière chaque pattern CSS : rayures, damiers, points, tous construits à partir d'empilements de dégradés avec des hard stops. Color interpolation hints (CSS Images Level 4) : insérer un simple pourcentage entre deux stops biaise l'endroit où tombe le milieu de l'interpolation. linear-gradient(red, 25%, blue) déplace le point milieu perceptuel à 25% plutôt que 50% par défaut, utile pour pondérer subtilement une couleur sur l'autre. Interpolation moderne en espace colorimétrique (CSS Color Module 4, baseline 2023+) : linear-gradient(in oklch, red, blue) interpole dans l'espace colorimétrique perceptuellement uniforme Oklab plutôt que sRGB encodé gamma, produisant des transitions plus lisses au milieu sans la « zone morte » grise boueuse que l'interpolation sRGB produit entre couleurs complémentaires à forte chroma. Le défaut reste in oklab (ou in srgb sur les anciens navigateurs), pour des dégradés faits main vous pouvez activer le mode opt-in.

Espaces colorimétriques modernes, pourquoi les dégradés oklch sont meilleurs

Pendant deux décennies, chaque dégradé CSS interpolait les valeurs de couleur en sRGB, l'espace colorimétrique encodé gamma avec lequel le web a grandi. L'interpolation sRGB a un mode d'échec bien connu : les dégradés entre couleurs complémentaires à forte chroma (rouge ↔ vert, bleu ↔ jaune, magenta ↔ cyan) passent par un point milieu gris boueux. Essayez linear-gradient(red, green) en sRGB et le milieu est marron, pas le vert olive vif que vos yeux attendent. Oklab (Björn Ottosson, décembre 2020) est un espace colorimétrique perceptuellement uniforme conçu spécifiquement pour corriger cela. OKLCH est la forme cylindrique d'Oklab, les trois coordonnées sont Lightness (0-100%), Chroma (0+) et Hue (0-360°). Les dégradés en OKLCH restent perceptuellement lisses sur toute la transition, la luminosité rampe uniformément et la teinte tourne de manière prévisible à travers la roue chromatique. La spécification CSS Color Module 4 a ajouté <color-interpolation-method> comme paramètre des fonctions de dégradé : linear-gradient(in oklch, red, blue). Le support des navigateurs a atteint la baseline mi-à-fin 2023 (Safari 16.4 mars 2023, Chrome 111 mars 2023, Firefox 113 mai 2023). Pour les dégradés utilisés dans des systèmes de design en production, l'option OKLCH est de plus en plus le bon choix ; ce générateur émet actuellement des dégradés par défaut sRGB et le toggle OKLCH est sur la feuille de route.

Performance, les dégradés sont peu coûteux mais pas gratuits

Les dégradés CSS sont GPU-accélérés sur tout navigateur moderne, ce qui les rend dramatiquement plus rapides que les images bitmap en tuiles pour la plupart des cas d'usage, pas de requête HTTP, pas de décodage, indépendant de la résolution vectorielle, recolorable instantanément via les variables CSS. Les compromis à connaître : le coût de paint évolue avec les pixels touchés et la complexité du dégradé ; les dégradés sont parmi les choses les plus coûteuses qu'un navigateur peut peindre, et empiler plusieurs couches de dégradé sur tout un hero pleine largeur peut coûter des frames sur les GPU bas de gamme. Animer les couleurs d'un dégradé déclenche un repaint complet à chaque frame, bien plus coûteux qu'animer transform ou opacity. Le fix moderne est d'utiliser des propriétés personnalisées enregistrées avec @property (Houdini Properties and Values API), qui laisse le navigateur interpoler les valeurs de couleur sur le thread compositeur plutôt que le thread principal ; supporté dans Chrome 78+ (nov 2019), Safari 16.4+ (mars 2023), Firefox 128+ (juil 2024). L'alternative traditionnelle moins chère est d'animer background-position sur un dégradé fixe, une vraie animation compositor-only qui tourne à 60fps partout. L'heuristique générale de performance : si votre page a un seul dégradé statique, vous ne remarquerez jamais ; si vous empilez cinq couches de dégradés animés sur chaque carte d'une longue liste, profilez avant d'expédier.

Là où les dégradés gagnent leur place

• Arrière-plans de section hero. Dégradés doux aux couleurs de marque derrière le titre de la page, souvent avec des overlays radiaux subtils pour une profondeur atmosphérique. Stripe, Linear et la plupart des landing pages SaaS modernes s'appuient sur ça.
• Stylisation de boutons. Des dégradés subtils sur les boutons CTA primaires ajoutent une profondeur tactile que les couleurs solides plates n'ont pas. Ajoutez un dégradé d'état hover légèrement plus sombre et le bouton paraît vivant.
• Overlays d'image pour la lisibilité du texte. Un linear-gradient vertical passant de transparent en haut à sombre en bas, superposé à une image hero avec du texte blanc dans la zone sombre, rend le texte lisible peu importe à quoi ressemble la photo.
• Arrière-plans de cartes. Des dégradés subtils sur les arrière-plans de cartes ajoutent de la profondeur sans box-shadow lourde.
• Squelettes de chargement et indicateurs de progression. Le squelette shimmer classique est un dégradé linéaire avec du blanc semi-transparent qui se déplace sur un fond gris, animé via background-position.
• Glassmorphisme et stylisation UI moderne. L'effet verre dépoli popularisé par macOS Big Sur et iOS, un fond semi-transparent avec backdrop-filter blur, souvent superposé d'un dégradé subtil pour l'effet de surbrillance.
• Sosies de mesh-gradients. Les vrais mesh gradients CSS ne sont pas encore standard (CSS Images Level 5 finira par les ajouter), mais empiler 3-5 grands dégradés radiaux avec des couleurs semi-transparentes produit aujourd'hui un effet de mesh-gradient convaincant.

Portée honnête : ce que ce générateur fait et ne fait pas

Cet outil génère des dégradés CSS linéaires et radiaux avec un aperçu en direct, un angle configurable (pour linéaire) ou position (pour radial), et un nombre quelconque de color stops avec positions. Il émet la syntaxe moderne sans préfixe. Ce que cet outil ne fait pas actuellement, et que les générateurs plus élaborés gèrent : dégradés coniques (la variété rotative-autour-d'un-centre, utilisée pour les diagrammes circulaires, les soleils et les roues chromatiques), voir le CSS Pattern Generator d'Absolutool pour quelques exemples de patterns coniques ; dégradés répétitifs (repeating-linear-gradient, repeating-radial-gradient, repeating-conic-gradient) pour rayures et remplissages style pattern, aussi géré dans le CSS Pattern Generator ; toggle d'interpolation OKLCH / Oklab (l'espace colorimétrique perceptuellement uniforme moderne), émet actuellement par défaut sRGB ; syntaxe color hint pour biaiser le point milieu entre stops ; keyframes d'animation multi-stops. Pour la plupart des dégradés de production (arrière-plans de hero, styles de bouton, effets d'overlay), linéaire + radial couvre le cas d'usage ; pour les cas plus exotiques, le CSS Pattern Generator est l'outil complémentaire approprié.

Questions fréquentes

Les dégradés CSS sont-ils pris en charge par tous les navigateurs ?

Oui. Les dégradés CSS sont pris en charge par tous les grands navigateurs depuis 2013, avec plus de 98 % de couverture mondiale. Vous n'avez plus besoin de préfixes vendeurs comme -webkit- pour un usage moderne.

Quel angle utiliser pour un dégradé diagonal ?

135 degrés crée une diagonale haut-gauche vers bas-droit, la plus courante. 45 degrés part de bas-gauche vers haut-droit. 90 degrés va de gauche à droite, et 180 degrés de haut en bas.

Puis-je utiliser plus de deux couleurs ?

Absolument. Cliquez sur « Ajouter un point » pour ajouter jusqu'à 8 points de couleur. Vous pouvez contrôler chaque couleur et sa position le long du dégradé. Les dégradés multi-points créent des effets visuels plus riches et dynamiques.

Pourquoi n'y a-t-il pas d'option de dégradé conique ?

Les dégradés coniques (la variété rotative-autour-d'un-centre, utilisée pour les diagrammes circulaires, les soleils et les roues chromatiques) constituent un problème de design différent des dégradés linéaires et radiaux, les paramètres sont des angles autour d'un centre plutôt que des positions le long d'une ligne. Pour des exemples et patterns de dégradés coniques, utilisez le CSS Pattern Generator d'Absolutool, qui gère les cas plus exotiques (coniques, repeating-linear, repeating-conic) pour les remplissages style pattern. Ce générateur se concentre sur les cas linear+radial qui couvrent la majeure partie des dégradés hero-et-bouton de production.

Les dégradés CSS sont-ils plus rapides que des fonds image ?

Dans la plupart des cas, oui, un dégradé CSS élimine une requête HTTP, une passe de décodage et la livraison d'assets multi-résolution exigée pour les écrans Retina. Le dégradé est aussi parfait au pixel à tout zoom et trivialement recolorable via les variables CSS. Compromis : les dégradés sont peints sur GPU mais le coût de paint évolue avec la surface en pixels et la complexité des stops ; empiler plusieurs couches de dégradés sur tout un hero pleine largeur peut coûter des frames sur les GPU bas de gamme. Pour l'animation, animez background-position (compositor-only, pas cher) plutôt que les color stops du dégradé (repaint complet, coûteux). Dégradés statiques uniques sur cartes ou sections hero, jamais perceptible.

Mes données sont-elles envoyées quelque part ?

Non. La génération tourne entièrement dans votre navigateur, sélecteurs de couleur, slider d'angle et génération de code CSS tournent tous localement. Il n'y a aucune requête sortante quand vous utilisez les contrôles. Le CSS généré est à vous, à coller où vous voulez.

Outils associés