Fonds en dégradé CSS

Qu'est-ce qu'un fond dégradé CSS ?

Un arrière-plan dégradé CSS est une image générée par du code à l’aide des fonctions natives de CSS. Il ne nécessite aucun fichier image externe.

Les dégradés sont assignés à la propriété background-image, pas background-color. Le navigateur les affiche en interpolant les valeurs de couleur sur un axe, une forme ou un angle défini, produisant ainsi une transition de couleur en douceur entièrement dans le code.

Parce que le navigateur génère le dégradé au moment de la peinture, aucune requête HTTP n'est faite — contrairement aux arrière-plans raster où le navigateur doit récupérer un fichier séparé avant que le rendu puisse être terminé.

Les dégradés CSS n'ont pas de dimensions intrinsèques. Ils sont mis à l'échelle pour remplir l'élément auquel ils sont appliqués, ce qui les rend naturellement fluides dans les mises en page responsive design (EN).

Stripe est un exemple bien connu de cette approche en production. Les sections héroïques de l'entreprise utilisent des appels linear-gradient() superposés sur de grands conteneurs, évitant complètement les requêtes d'images externes tout en maintenant un rendu nette sur toutes les densités d'écran.

---

Quels sont les types de dégradés CSS ?

CSS fournit 4 fonctions de dégradé natives : linear-gradient(), radial-gradient(), conic-gradient(), et des variantes répétitives de chacune.

Chaque type utilise un modèle géométrique différent pour distribuer les couleurs. Le choix du mauvais type pour un contexte de mise en page produit des artefacts visuels ou des fusions involontaires qui ne peuvent pas être corrigés uniquement par des ajustements d’arrêt de couleur.

Les dégradés coniques CSS ont un score de compatibilité inter-navigateurs de 92/100 selon les données de LambdaTest, avec une prise en charge complète sur Chrome, Firefox, Safari 12.1+, et Edge 79+. IE 11 n'a aucun support pour conic-gradient().

Dégradé linéaire

Distribution des couleurs basée sur l'axe :

linear-gradient() fait passer les couleurs le long d'une ligne droite à un angle ou une direction définis.

• La direction par défaut est to bottom (180 degrés) quand aucun argument direction n'est fourni

• Accepte les unités d'angle deg, turn, et rad en plus des directions de mots-clés comme to right

• Les arrêts durs créés en plaçant 2 arrêts à la même position produisent un bord tranchant sans mélange

Dégradé radial

radial-gradient() rayonne la couleur vers l'extérieur à partir d'un point central.

La forme et la taille sont indépendamment configurables :

• circle maintient des rayons égaux sur les deux axes ; ellipse s'adapte aux dimensions de l'élément (par défaut)

• Mots-clés de taille : closest-side, farthest-side, closest-corner, farthest-corner

• La position centrale utilise la même syntaxe que background-position

Dégradé conique

Les couleurs sont balayées autour d’un point central à des angles définis plutôt que le long d’un axe.

conic-gradient() a été le dernier des 4 types à atteindre le support complet des navigateurs, atterrissant dans Chrome 69, Firefox 83 et Safari 12.1. Il accepte des valeurs d'angle en deg, turn et grad unités à chaque arrêt de couleur — une distinction par rapport aux arrêts basés sur des pourcentages utilisés dans les variantes linéaires et radiales.

Les graphiques circulaires et les roues de couleurs sont les deux cas d'utilisation les plus courants, tous deux réalisables sans JavaScript ou SVG.

Répéter les dégradés

Le comportement de la mosaïque est la différence clé par rapport aux fonctions de gradient standard.

Les variantes répétitives (repeating-linear-gradient(), repeating-radial-gradient(), repeating-conic-gradient()) mosaïquent le motif défini sur l'élément au lieu d'étirer une seule instance de dégradé pour le remplir.

De très petits intervalles de répétition, par exemple un repeating-linear-gradient défini à des intervalles de 2 px, peuvent produire des artefacts d'alias sur les écrans à haute résolution. Les tests sur des appareils physiques ou l'utilisation de l'émulation d'appareil Chrome DevTools les détectent avant la production.

---

Comment fonctionne la syntaxe de dégradé linéaire CSS ?

La syntaxe linear-gradient() suit une structure cohérente en 3 parties : une direction facultative, au moins 2 arrêts de couleur et des valeurs de position facultatives pour chaque arrêt.

Syntaxe complète : linear-gradient([direction], color-stop-1, color-stop-2, ...)

Valeurs de direction et d'angle

Direction accepte 2 formats :

• Mots-clés directions : to right, to bottom, to top left, et des combinaisons de compas similaires

• Angles explicites : 45deg, 0.5turn, 1.57rad

Lorsqu'aucune direction n'est spécifiée, le navigateur utilise par défaut to bottom (équivalent à 180deg). Une valeur de 0deg pointe vers le haut, et les valeurs de degrés augmentent dans le sens horaire — ce qui est l'inverse de la convention trigonométrique standard. A savoir avant de passer 10 minutes à vous demander pourquoi 90deg ne pointe pas vers le haut.

Syntaxe d'arrêt de couleur

Les arrêts de couleur suivent le modèle color position, par exemple red 25% ou #3a86ff 100px.

• Unités de position : pourcentages, pixels, em, ou rem

• Les arrêts sans position sont répartis uniformément entre les arrêts définis précédent et suivant

• 2 arrêts à la même position (par exemple, red 50%, blue 50%) produisent un bord dur sans fusion graduelle

Conseils de couleur

Un indice de couleur déplace le point médian de la transition entre 2 arrêts de couleur.

La syntaxe place une valeur de position autonome entre 2 arrêts : red, 20%, blue. Cela indique au navigateur d'atteindre le point médian du mélange rouge-bleu à la marque de 20 % plutôt qu'à la marque par défaut de 50 %. Utile pour donner l'impression qu'un dégradé « tire » vers un côté sans ajuster les positions d'arrêt.

---

Comment fonctionne la syntaxe de dégradé radial CSS ?

radial-gradient() génère une couleur qui s'étend vers l'extérieur à partir d'un point central, avec une forme et une taille configurables indépendamment.

Syntaxe complète : radial-gradient([shape] [size] at [position], color-stop-1, color-stop-2, ...)

Paramètres de forme et de taille

Le comportement des ellipses par rapport aux cercles diffère sur les éléments non carrés :

Un dégradé ellipse s'étire pour correspondre aux proportions de largeur et de hauteur de l'élément. Un dégradé circle maintient des rayons égaux sur les deux axes indépendamment des dimensions de l'élément, ce qui signifie que la forme circulaire apparaîtra décentrée si l'élément n'est pas carré.

Mots-clés de taille dans la pratique

farthest-corner est la valeur par défaut et produit un dégradé qui s'étend jusqu'à atteindre le coin le plus éloigné de l'élément, remplissant entièrement l'arrière-plan.

closest-side arrête le dégradé au bord le plus proche. Cela crée un bord dur visible sur les côtés éloignés de l'élément, ce qui constitue un choix de conception délibéré plutôt qu'une erreur de rendu. Chaque mot-clé size produit un résultat visuellement distinct sur le même élément : il ne s'agit pas de variations stylistiques de la même sortie.

---

Comment fonctionne la syntaxe CSS Conic Gradient ?

conic-gradient() distribue les couleurs angulairement autour d'un point central, balayant autour de la façon dont les aiguilles se déplacent sur un cadran d'horloge.

Syntaxe complète : conic-gradient([from angle] [at position], color-stop-1, color-stop-2, ...)

L'angle de départ par défaut est 0deg (haut de l'élément). Le centre par défaut est 50% 50%. Les deux peuvent être modifiés indépendamment.

Arrêts de couleur basés sur l'angle

Les arrêts de couleur dans conic-gradient() acceptent des valeurs d'angle en plus des pourcentages.

• conic-gradient(red 0deg, blue 180deg, red 360deg) produit un balayage demi-rouge, demi-bleu

• conic-gradient(red 0%, blue 50%, red 100%) produit le même résultat en utilisant des pourcentages

• Le mélange d'unités d'angle et de pourcentages dans la même déclaration est valide

Production de diagramme circulaire :

Un graphique circulaire à 3 segments ne nécessite pas de JavaScript. La syntaxe conic-gradient(red 120deg, blue 240deg, green 360deg) divise le cercle en 3 secteurs égaux. Ajouter border-radius: 50% à l'élément l'arrondit en cercle.

Contrôle de position

Le mot clé at définit le point central du balayage, en utilisant la même syntaxe de position que radial-gradient() et background-position.

Déplacer le centre de 50% 50% crée des distributions angulaires asymétriques. Un dégradé conique avec at 0 0 place le centre dans le coin supérieur gauche de l'élément, produisant un balayage en quart de cercle sur la surface de l'élément. Utile pour les effets de lueur de coin dans les conceptions de cartes.

---

Que sont les arrêts de couleur de dégradé CSS et comment fonctionnent-ils ?

Un arrêt de couleur définit l’endroit où une couleur spécifique apparaît dans le dégradé et la façon dont le navigateur interpole vers les arrêts voisins.

Syntaxe d'arrêt de couleur : color position — par exemple, #3a86ff 25% ou rgba(0,0,0,0.5) 100px.

Positionnement et distribution des arrêts

3 comportements de contrôle du placement des stops :

• Les arrêts avec des positions explicites sont rendus exactement à ce point dans le dégradé

• Les arrêts sans positions sont automatiquement répartis de manière égale entre les arrêts définis précédent et suivant

• 2 butées placées à des positions identiques créent un bord dur sans transition graduelle entre elles

L'empilement de 3 arrêts ou plus en séquence produit des dégradés multibande. Le motif d'arrière-plan repeating-linear-gradient(45deg, #eee 0px, #eee 10px, white 10px, white 20px) crée un effet rayé en utilisant 4 arrêts sans aucun CSS supplémentaire. Les motifs CSS background patterns (EN) construits de cette façon ne nécessitent aucune ressource d'image et sont rendus de manière nette à toutes les résolutions.

Interpolation des couleurs

Par défaut, les navigateurs effectuent une interpolation entre les arrêts de l’espace de couleur sRVB, ce qui peut produire des tons moyens boueux lors des transitions entre des teintes opposées, par exemple, du rouge au bleu passant par une zone gris-violet désaturée.

La nouvelle syntaxe color-mix() et la fonction color() élargissent les options d'interpolation, y compris l'espace colorimétrique oklch, qui produit des dégradés perceptuellement uniformes sans les artefacts de désaturation. La prise en charge par le navigateur de l'interpolation oklch dans les dégradés se situe à environ 88 % selon les données State of CSS 2024.

Conseils de couleur (Midpoint Control)

Un indice de couleur est une valeur de position uniquement placée entre 2 arrêts de couleur qui déplace le point médian du mélange.

Syntaxe : red, 30%, blue — la valeur 30% est l'indice, pas un arrêt de couleur. Le navigateur atteint le point médian de la transition du rouge au bleu à la marque de 30 % au lieu de la valeur par défaut de 50 %. Cette accélération asymétrique vers un côté est un outil subtil. La plupart des développeurs la manquent complètement car elle ressemble à une valeur de position jusqu'à ce que vous compreniez ce qu'elle fait.

---

Comment plusieurs dégradés CSS sont-ils superposés sur un élément ?

Plusieurs dégradés CSS sont empilés en tant que valeurs séparées par des virgules sur une seule déclaration background-image.

background-image: linear-gradient(...), radial-gradient(...), url('image.jpg');

La première valeur déclarée est affichée en haut, la dernière en bas. Cet ordre d'empilement est l'opposé du comportement z-index, qui fait trébucher les gens la première fois.

Exigences de transparence

Les calques inférieurs ne sont visibles que si les calques supérieurs contiennent de la transparence.

• Le mot-clé transparent se résout en rgba(0,0,0,0) — noir entièrement transparent

• Les valeurs rgba() et hsla() avec un alpha inférieur à 1 produisent une transparence partielle

• Un linear-gradient(black, black) en haut bloque tout ce qui est en dessous, peu importe le nombre de calques déclarés en dessous

Un schéma de production courant : background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('hero.jpg') superpose un écran sombre semi-transparent sur une photographie, créant un contraste de texte fiable sans modifier le fichier image. Selon l'analyse 2024 Million de WebAIM, un faible contraste des couleurs affecte 83,6 % des sites Web - cette technique de superposition de dégradés en couches s'attaque directement à la cause la plus courante de cet échec sur les sections riches en images.

Contrôle des propriétés par couche

background-size, background-position, et background-repeat acceptent des valeurs séparées par des virgules qui sont mappées à chaque calque dans l'ordre.

background-image: linear-gradient(...), url('texture.png');
background-size: cover, 200px 200px;
background-position: center, top left;

Le cover s'applique au calque de dégradé ; 200px 200px s'applique à la texture. Ce contrôle par calque rend les arrière-plans CSS animés (EN) complexes et les systèmes de superposition en couches gérables sans dupliquer les sélecteurs ou ajouter des éléments d'enveloppe.

Combiner des dégradés avec des images

Les dégradés et les références d'image url() peuvent coexister dans la même déclaration background-image.

Les calques de dégradé sont générés par le navigateur au moment de la peinture, donc les combiner avec une référence d'image n'augmente pas le nombre de requêtes HTTP au-delà de la récupération d'une seule image. Les couches de dégradé elles-mêmes restent sans requête.

Comment les dégradés CSS affectent-ils les performances ?

Les dégradés CSS sont générés par le navigateur au moment de la peinture. Elles produisent zéro requêtes HTTP, contrairement aux images d'arrière-plan raster qui nécessitent un aller-retour complet sur le réseau avant que le navigateur puisse les afficher.

Cela dit, les dégradés ont un coût. Le coût apparaît au stade du rendu, pas au stade du réseau.

Coût de repeindre pendant l'animation

L'animation directe des propriétés du dégradé (valeurs de couleur, angle, positions d'arrêt) déclenche une repeinte complète sur chaque image.

A 60 images par seconde, cette re-peinture s'exécute en continu. Sur les dégradés complexes avec de nombreux arrêts de couleur ou de grandes dimensions d'élément, chaque repeinte consomme du temps CPU mesurable.

L'approche correcte pour les arrière-plans de dégradé animés :

• Animer background-position sur un dégradé avec background-size: 400% 400% au lieu d'animer les couleurs directement

• Utilisez opacity ou transform sur un pseudo-élément superposé sur un dégradé statique

• Évitez will-change: background-image — cela ne crée pas de calque de composition et ne fournit aucun avantage en termes de performances

Dégradés complexes et coût de rendu

Chaque arrêt de couleur supplémentaire augmente la charge de calcul des pixels pendant la peinture.

Un dégradé à 3 arrêts est rendu nettement plus rapidement qu’un dégradé à 10 arrêts sur le même élément de grande taille. Sur les appareils mobiles dotés d’une mémoire GPU limitée, la répétition de dégradés à de très petits intervalles (2 à 4 pixels) peut entraîner des artefacts d’aliasing et augmenter le temps de peinture. Les tests sur des appareils Android physiques bas de gamme permettent de résoudre ces problèmes avant la production.

will-change: transform sur un pseudo-élément, pas sur le dégradé lui-même, fait passer ce calque en composite sans forcer le recalcul du dégradé à chaque image.

---

Comment les dégradés CSS sont-ils utilisés dans le Responsive Design ?

Les dégradés CSS sont mis à l’échelle avec leur conteneur par défaut. Aucune solution de contournement background-size: cover n'est requise, contrairement aux images raster où le navigateur doit étirer ou recadrer une grille de pixels finie.

Selon les données de VWO, les sites Web réactifs affichent un taux de conversion 11% plus élevé que leurs équivalents non réactifs. Les arrière-plans dégradés qui s'adaptent fluidement aux changements de mise en page font partie de cet avantage mobile-first design (EN) par rapport aux alternatives d'images statiques.

Pourcentage vs. Positions d'arrêt de pixel

Comment les arrêts se comportent à différentes tailles d'écran :

• Les arrêts de pourcentage sont mis à l'échelle avec les dimensions rendues de l'élément à chaque point d'arrêt

• Les arrêts de pixels restent fixes, peu importe la taille du conteneur

• Le mélange des deux unités dans un même dégradé est valide et parfois utile : les arrêts fixes basés sur les pixels peuvent ancrer une bande tandis que les arrêts en pourcentage gèrent les mélanges environnants.

Un dégradé avec des arrêts durs à 50px et calc(100% - 50px) maintient une bande de largeur fixe au centre d'un élément indépendamment de la largeur totale de l'élément. Ce comportement est impossible avec les stops en pourcentage uniquement.

Requêtes multimédias et direction du dégradé

Les Requêtes multimédias (EN) peuvent modifier la direction du dégradé, la palette de couleurs ou l'angle à des points d'arrêt spécifiques sans aucun élément d'image supplémentaire.

.hero {
  background-image: linear-gradient(to right, #3a86ff, #8338ec);
}

@media (max-width: 768px) {
  .hero {
    background-image: linear-gradient(to bottom, #3a86ff, #8338ec);
  }
}

Le dégradé horizontal sur ordinateur devient vertical sur mobile. Pas d'échange d'image, pas de requête HTTP supplémentaire.

Superpositions de dégradés sur des images réactives

L’empilement d’un dégradé semi-transparent sur une photo nécessite background-size: cover sur le calque de dégradé et le calque d’image.

Sans correspondance des valeurs background-size par calque, l’image est mise à l’échelle pour remplir le conteneur, mais pas le calque de dégradé, ce qui rompt l’alignement visuel entre la superposition et la photo. Chaque valeur background-size, background-position, et background-repeat correspond à sa couche correspondante dans l'ordre de déclaration background-image.

---

Quelles sont les considérations d'accessibilité des dégradés CSS ?

Le faible contraste des couleurs est l'échec d'accessibilité numéro 1 sur le Web, affectant 83,6% de tous les sites Web selon l'analyse 2024 Million de WebAIM. Les dégradés sont une cause récurrente car le rapport de contraste change en continu sur la surface du dégradé.

Le WCAG 2.1 SC 1.4.3 exige un taux de contraste minimum de 4.5 :1 pour le texte normal et de 3 :1 pour le texte volumineux (18px+ normal ou 14px+ gras). Avec un arrière-plan uni, un seul contrôle de contraste passe l'élément entier. Avec un arrière-plan dégradé, chaque point le long du dégradé est un échec potentiel.

Test du contraste sur les arrière-plans dégradés

Les outils automatisés détectent environ 95% des problèmes de contraste, mais les 5% restants impliquant les dégradés et les arrière-plans d'image nécessitent une vérification manuelle (web-accessibility-checker.com (EN), 2024).

Approche de test pour les arrière-plans dégradés :

• Identifiez la couleur d'arrière-plan la plus claire dans la plage de dégradés

• Vérifiez le contraste entre cette couleur et la couleur du texte

• Si le texte passe au point le plus clair, il passe à tous les points

L'analyseur de contraste de couleur TPGi (CCA) échantillonne directement les pixels à l'écran, y compris les surfaces dégradées. Stark dans Figma vérifie le contraste pendant la phase de mockup (EN) avant que n'importe quel CSS soit écrit.

Dégradés animés et sensibilité au mouvement

Les troubles vestibulaires affectent plus de 70 millions de personnes dans le monde, ce qui fait des arrière-plans animés une véritable barrière plutôt qu'un inconvénient mineur (CSS-Tricks).

Les arrière-plans dégradés animés doivent respecter la requête média prefers-reduced-motion. Tous les principaux navigateurs — Chrome, Edge, Firefox, Safari et Opera — prennent en charge cette fonctionnalité.

@media (prefers-reduced-motion: no-preference) {
  .animated-bg {
    animation: gradientShift 6s ease infinite;
  }
}

L'animation ne s'exécute que lorsque l'utilisateur n'a pas demandé de mouvement réduit. Les animations de dégradés décoratifs sans valeur informative devraient être entièrement supprimées sous cette requête, pas ralenties.

Signification de Color-Only

Les dégradés qui passent du rouge au vert pour indiquer l'état (faible à élevé, mauvais à bon) ne conviennent pas aux utilisateurs ayant une déficience de la vision des couleurs.

Ne comptez pas uniquement sur les dégradés de couleurs pour communiquer un sens. Associez le dégradé à une étiquette de texte, une icône ou une valeur numérique. Cela s'applique aux composants de la barre de progression CSS (EN), aux cartes thermiques et à tout arrière-plan qui encode les données via une transition de couleur.

---

Comment fonctionnent les dégradés CSS dans les environnements multi-navigateurs ?

Les 4 types de dégradés CSS sont complètement pris en charge dans Chrome 69+, Firefox 83+, Edge 79+, et Safari 12.1+. Le préfixe -webkit- n'est plus nécessaire pour linear-gradient() ou radial-gradient() dans tous les navigateurs actuellement maintenus.

Plus de 30 % des problèmes de rendu des dégradés se produisent dans Safari et Internet Explorer, les dégradés coniques produisant un taux d’échec deux fois plus élevé que les types linéaires et radiaux (Bomberbot).

Matrice actuelle de support des navigateurs

IE 11 ne prend pas en charge conic-gradient(). Pour les 0,3 à 0,5 % d'utilisateurs qui utilisent encore IE 11 (StatCounter 2024), un @supports de secours empêche une mise en page défectueuse.

Stratégie de secours avec @supports

@supports teste la prise en charge de conic-gradient() et fournit un linear-gradient() de secours pour les environnements où le rendu conique échoue.

.element {
  background-image: linear-gradient(135deg, #3a86ff, #8338ec);
}

@supports (background: conic-gradient(red, blue)) {
  .element {
    background-image: conic-gradient(from 45deg, #3a86ff, #8338ec);
  }
}

Le dégradé linéaire s'affiche partout. Le dégradé conique le remplace uniquement dans les navigateurs qui le prennent en charge. Pas de JavaScript, pas de reniflage d'agent utilisateur.

Notes de rendu spécifiques à Safari

Safari présentait un bogue documenté avec le rendu des ellipses radial-gradient() avant la version 14.1.

Le bogue affectait la mise à l'échelle des ellipses à l'intérieur des conteneurs flex, produisant un dégradé circulaire sur les éléments où une ellipse était spécifiée. Les tests sur Safari 14.0 et versions antérieures avec des dégradés radiaux à l'intérieur des parents display: flex ou display: grid captent cela avant l'expédition. Le flux de travail de test de compatibilité entre les navigateurs (EN) devrait inclure les appareils iOS physiques, puisque Safari sur iOS suit le même moteur de rendu que Safari sur ordinateur et hérite des mêmes bogues spécifiques à la version.

Questions fréquentes : Fonds en dégradé CSS

Quelle est la différence entre un dégradé linéaire et radial en CSS ?

linear-gradient() distribue la couleur le long d'un axe droit à un angle défini.

radial-gradient() étend la couleur vers l'extérieur à partir d'un point central dans une forme circulaire ou elliptique.

La géométrie est la principale différence. Utilisez linéaire pour les arrière-plans directionnels, radial pour les effets de projecteurs ou de lueur.

Puis-je utiliser un dégradé CSS comme couleur de fond ?

Les dégradés CSS sont des valeurs d'image et ne fonctionnent que sur background-image, pas sur background-color.

Définir background-color sur une fonction gradient ne produit aucune sortie. La propriété n'accepte pas les types de données <image>.

Comment ajouter de la transparence à un dégradé CSS ?

Utilisez les valeurs de couleur rgba() ou hsla() avec un alpha inférieur à 1, ou le mot-clé transparent.

Par exemple, linear-gradient(rgba(0,0,0,0.5), transparent) crée une superposition semi-opaque qui s'estompe. Il s’agit de l’approche standard pour le contraste de texte sur les images de héros.

Comment animer un arrière-plan en dégradé CSS ?

L'animation directe des valeurs de couleur de dégradé déclenche une repeinte complète de chaque image, ce qui est coûteux.

La meilleure approche : animer background-position sur un dégradé avec background-size: 400% 400%. Cela déplace le gradient sans le recalculer, ce qui réduit la charge du GPU.

Pourquoi mon dégradé est-il boueux ou gris au milieu ?

Il s’agit d’un problème d’interpolation des couleurs dans l’espace de couleur sRGB par défaut.

Les transitions entre des teintes opposées (du rouge au bleu, par exemple) passent par une zone intermédiaire désaturée. Passer à l'interpolation oklch en utilisant la fonction color() produit un mélange perceptuellement plus propre.

Comment superposer plusieurs dégradés sur un seul élément ?

Listez-les comme des valeurs séparées par des virgules dans background-image.

La première valeur est affichée en haut. Les calques inférieurs ont besoin d'arrêts transparents ou semi-transparents pour rester visibles. Faites correspondre les valeurs background-size et background-position par calque pour garder l'alignement cohérent.

Comment créer un effet de texte dégradé CSS ?

Appliquez le dégradé à background-image, puis définissez background-clip: text et color: transparent sur le même élément.

La forme de texte coupe le dégradé, rendant la couleur visible uniquement à travers les lettres. Le support du navigateur est complet dans tous les navigateurs modernes sans préfixes.

Les dégradés CSS fonctionnent-ils sur tous les navigateurs ?

Les dégradés linéaires et radiaux sont entièrement pris en charge dans tous les navigateurs maintenus. Le préfixe -webkit- n'est plus nécessaire.

conic-gradient() n'est pas pris en charge dans IE 11. Utilisez @supports pour fournir un dégradé linéaire de secours pour les environnements où le rendu conique échoue.

Comment créer un fond dégradé CSS pleine page ?

Appliquez le dégradé à l'élément body avec min-height: 100vh.

body {
  background-image: linear-gradient(135deg, #3a86ff, #8338ec);
  min-height: 100vh;
}

Cela couvre la fenêtre complète, quelle que soit la hauteur du contenu.

Comment puis-je m’assurer qu’un arrière-plan dégradé répond aux exigences de contraste d’accessibilité ?

Les WCAG 2.1 exigent un rapport de contraste 4,5 :1 pour le texte normal. Avec les dégradés, testez sur la couleur d’arrière-plan la plus claire de la plage, et non sur une moyenne.

Si le texte échoue à l’endroit le plus clair, ajoutez une superposition semi-opaque ou déplacez le texte dans un conteneur de couleur unie.