repeating-conic-gradient()

<angle>

Lorsque cet angle est précédé du mot-clé from, cela définit la rotation du dégradé dans le sens horaire.

<position>

Une position définie avec la même syntaxe que la propriété background-position. Cette position définit le centre du dégradé. Lorsque cette valeur est absente, la valeur utilisée par défaut est center, ce qui indique que le dégradé est centré.

<angular-color-stop>

Une valeur <color> pour un arrêt de couleur, suivie par une ou plusieurs positions d'arrêt (données par un <angle> le long de l'arc). La taille de l'arc répété pour le dégradé est donné par l'angle du dernier arrêt de couleur auquel on a soustrait l'angle du premier arrêt de couleur.

<color-hint>

Une indication d'interpolation qui définit la façon dont le dégradé progresse entre deux arrêts de couleurs adjacents. Cette indication indique l'emplacement où la couleur doit être la couleur intermédiaire entre les deux arrêts environnant. Si cette valeur est absente, la moitié de la transition entre les couleurs sera atteinte à la moitié de l'arc entre les deux arrêts.

La syntaxe pour repeating-conic-gradient() est semblable à celle de conic-gradient() et à celle de repeating-radial-gradient(). À l'instar du dégradé conique unitaire, les arrêts de couleur sont placés autour d'un arc. Comme pour les dégradés radiaux répétés, la taille de la portion répétée correspond au premier arrêt de couleur auquel on a soustrait l'angle du dernier arrêt de couleur.

Les dégradés ci-dessus sont définis avec un tiers de bleu, un tiers de rouge et un tiers de jaune.

repeating-conic-gradient(from 0deg, red 0deg 30deg, yellow 30deg 60deg, blue 60deg 90deg);

repeating-radial-gradient(red 0 8%, yellow 8% 16%, blue 16% 24%);

conic-gradient(red 120deg, yellow 120deg 240deg, blue 240deg);

radial-gradient(red 33%, yellow 33% 66%, blue 66%);

Pour un dégradé répété, on définit le premier et le dernier arrêt de couleur. Si les valeurs ne sont pas explicitement définies, elles correspondent respectivement aux angles 0 et 360deg. Lorsque ces valeurs sont utilisées par défaut, l'arc qui est répété occupe 360 degrés et il n'y a donc pas de répétition.

Comme le dégradé conique unitaire, les arrêts de couleur sont placés le long d'un arc de dégradé, la circonférence d'un cercle plutôt que le long d'une ligne qui est émise depuis le centre du dégradé. La transition entre les couleurs se fait autour du centre, en démarrant en haut s'il n'y a pas d'indication from <angle>, dans le sens des aiguilles d'une montre, pour l'angle indiqué, puis se répétant.

Un dégradé conique répété est défini en indiquant un angle de rotation, le centre du dégradé et une liste d'arrêts de couleur. Les arrêts de couleur sont définis avec un angle (type CSS <angle>). Les unités qui permettent de déclarer un angle sont deg (pour les degrés), grad (pour les grades), rad (pour les radians) et turn (pour les tours). Un cercle se compose de 360 degrés, 400 grades, 2π radians et d'un tour. Les navigateurs qui implémentent les dégradés coniques répétés acceptent également les pourcentages (100% correspond à 360 degrés), mais ce type de valeur ne fait pas partie de la spécification.

La syntaxe de définition permet de placer le centre du dégradé à l'intérieur ou encore à l'extérieur de l'image. Les valeurs permettant de définir la position du centre s'écrivent comme la syntaxe à deux valeurs de background-position.

Personnaliser des dégradés

En ajoutant des arrêts de couleur à l'arc du dégradé, il est possible de créer des dégradés sur mesure. La position d'un arrêt de couleur se définit via un <angle>. Si on n'indique pas de position pour un arrêt, celui-ci est placé à mi-parcours entre le précédent et le suivant. Si la position du premier ou du dernier arrêt ne sont pas définies, par défaut, ils seront placés à 0deg et à 360deg respectivement.

Attention, lorsque ces valeurs par défaut sont utilisées, l'arc occupe tout le cercle et le dégradé n'est donc pas répété. Si on déclare un angle différent de 0 ou 360 degrés pour le premier et le dernier arrêt, le dégradé se répètera selon cette valeur. Ainsi, si on ne déclare pas d'angle pour la première couleur et 10% pour le dernier arrêt de couleur, l'arc se répètera dix fois. Le point de départ correspond au premier arrêt de couleur déclaré et le dernier arrêt de couleur correspond au dernier angle déclaré.

Les deux formulations suivantes sont donc équivalentes :

repeating-conic-gradient(red, orange, yellow, green, blue 50%);
repeating-conic-gradient(from -45deg, red 45deg, orange, yellow, green, blue 225deg)

Par défaut, les couleurs évoluent progressivement entre chaque arrêt et le milieu de l'arc correspondra à la moyenne des couleurs. Il est possible de déplacer ce point intermédiaire en fournissant une indication quant à l'emplacement du milieu de la transition.

Si deux (voire plusieurs) couleurs sont au même emplacement, la transition sera une ligne brutale entre la première et la dernière couleur déclarées à cet emplacement.

Bien qu'il soit possible de mélanger et de combiner différentes unités pour les angles, il est préférable d'éviter par souci de lisibilité et maintenabilité.

<repeating-conic-gradient()> = 
  repeating-conic-gradient( [ <conic-gradient-syntax> ] )  

<conic-gradient-syntax> = 
  [ [ [ from <angle> ]? [ at <position> ]? ] || <color-interpolation-method> ]? , <angular-color-stop-list>  

<position> = 
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right ] && [ top | center | bottom ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]  

<color-interpolation-method> = 
  in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]  

<angular-color-stop-list> = 
  <angular-color-stop> , [ <angular-color-hint>? , <angular-color-stop> ]#?  

<length-percentage> = 
  <length>      |
  <percentage>  

<rectangular-color-space> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020       |
  lab           |
  oklab         |
  xyz           |
  xyz-d50       |
  xyz-d65       

<polar-color-space> = 
  hsl    |
  hwb    |
  lch    |
  oklch  

<hue-interpolation-method> = 
  [ shorter | longer | increasing | decreasing ] hue  

<angular-color-stop> = 
  <color> <color-stop-angle>?  

<angular-color-hint> = 
  <angle-percentage>  

<color-stop-angle> = 
  <angle-percentage>{1,2}  

<angle-percentage> = 
  <angle>       |
  <percentage>  

Les navigateurs ne fournissent pas d'informations spécifiques aux outils d'assistance quant aux images d'arrière-plan. Les lecteurs d'écran ne pourront donc pas annoncer le sens de l'image aux utilisatrices et utilisateurs. Bien qu'il soit possible de créer des camemberts, damiers, etc. avec CSS, si l'image contient des informations critiques pour la compréhension générale de la page, mieux vaudra décrire ces informations de façon sémantique dans le document, car CSS ne fournit pas de méthode native pour indiquer un texte alternatif.

• Explications MDN pour le WCAG et la règle 1.1
• Comprendre les critères de réussite 1.1.1 - Guide de compréhension WCAG 2.0 du W3C (en anglais)

Voir la page Utiliser les dégradés CSS pour plus d'exemples.

• Utiliser les dégradés CSS
• Les autres fonctions de dégradés :
  • conic-gradient()
  • linear-gradient()
  • radial-gradient()
  • repeating-linear-gradient()
  • repeating-radial-gradient()
• <image>
• image()
• element()
• image-set()
• cross-fade()