linear-gradient

  • Raccourci de la révision : CSS/linear-gradient
  • Titre de la révision : linear-gradient
  • ID de la révision : 347079
  • Créé :
  • Créateur : FredB
  • Version actuelle ? Non
  • Commentaire Fixed a few typos

Contenu de la révision

La fonction CSS linear-gradient() créée une {{ xref_cssimage() }} qui représente un dégradé linéaire de couleurs. Le résultat de cette fonction est un objet CSS du type {{ xref_cssgradient() }}. Comme tout autre dégradé, un dégradé linéaire CSS n'est pas une {{ xref_csscolorvalue() }} CSS mais une image sans dimensions intrinsèques ; en d'autres termes, elle n'a pas de taille naturelle ou préférée, ni de proportions préférées. Sa taille s'adapte à l'élément auquel il est appliqué.

Les dégradés linéaires sont définis par un axe, la ligne de dégradé, dont chacun des point est d'une couleur différente. Les lignes perpendiculaires à cette ligne ont une seule couleur, celle correspondant au point d'intersection avec la ligne de dégradé.

linear-gradient.pngLa ligne de dégradé est définie par le centre de la boîte contenant le dégradé et un angle. Les couleurs du dégradé sont définies par différents points, le point de départ, le point d'arrivée et entre ces deux, des points intermédiaires optionnels définissant un passage par une couleur précise.

Le point de départ est le point auquel débute le dégradé. Il est défini par l'intersection de la ligne de dégradé et la perpendiculaire passant par le coin de la boîte qui est dans le même quadrant.

De même, le point d'arrivée est le point sur la ligne de dégradé où la couleur finale est atteinte. Il peut aussi être défini comme l'intersection de la ligne de dégradé et la perpendiculaire issue du coin le plus proche, mais il est décris plus simplement comme le symétrique du point de départ dans une symétrie centrale de centre confondu avec le centre de la boîte.

Ces définitions quelque peu complexes des points de départ et d'arrivée amènent à une propriété intéressante parfois appelée les coins magiques : les coins les plus proches des points de départ et d'arrivée ont aussi la même couleur que le point de départ et d'arrivée, respectivement.

Plus de deux couleurs, les couleurs des points de départ et d'arrivée, peuvent être utilisées dans un dégradé linéaire : en définissant des points intermédiaires sur la ligne de dégradé, le développeur web peut maîtriser la coloration en définissant les couleurs à chacun de ces points. Un point intermédiaire peut être défini implicitement, et dans ces cas, il est placé au milieu du point qui le précède et du point qui le devance. Mais ils peuvent être positionnés explicitement en utilisant les types de données CSS {{ xref_csslength() }} ou {{ xref_csspercentage() }}.

Ces points de couleurs permettent de définir des dégradé qui sont la concaténation de plusieurs linear-gradient de base. Mais la syntaxe des dégradés linéaires ne permet pas la répétition des dégradés. Pour une telle fonctionnalité, utilisez la propriété CSS {{ Cssxref("repeating-linear-gradient") }}.

Les dégradés, et parmi eux les dégradés linéaires, sont définis comme du type de donnée CSS <image>. Ainsi, ils peuvent être utilisés à n'importe quel endroit où un tel type de donnée est nécessaire. Toutefois, Gecko ne supporte les dégradés CSS comme des valeurs de la propriété {{ Cssxref("background-image") }}, ainsi que dans la propriété raccourcie {{ Cssxref("background") }}.

Syntaxe

linear-gradient( [ [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )

Préfixes : référez vous à la table de compatibilité pour le détail des préfixes à utiliser pour les dégradés.

Où :

<color-stop>

{{ Xref_csscolorvalue() }} [ {{ Xref_csspercentage() }} | {{ Xref_csslength() }} ]

Valeurs

<side-or-corner>
représente la position du point de départ sur la ligne de dégradé. Elle consiste en deux mots-clés : le premier indique le côté selon un axe horizontale, left ou right, et le second le côté selon un axe vertical, top ou bottom. L'ordre n'est pas important et chacun des mots-clés est optionnel.
les valeurs to top, to bottom, to left et to right sont traduites en termes d'angles 0deg, 180deg, 270deg, 90deg respectivement. Les autres sont traduits en un angle qui place le point de départ dans le même quadrant que le coin décrit et tel que la ligne définie par le point de départ et le coin est perpendiculaire à la ligne de dégradé. Ainsi, la couleur définie par <color-stop> sera exactement cette appliquée au coin. Ceci est parfois appelé la propriété des « coins magiques ». Le point d'arrivée de la ligne de dégradé est le symétrique du point de départ situé de l'autre côté du centre de la boîte.
<angle>
Un angle de direction pour le dégradé. Voir {{ Xref_cssangle() }}.
<color-stop>
Cette valeur est constituée d'une valeur de {{ Xref_csscolorvalue() }}, suivie d'une position d'arrêt optionnelle (soit un pourcentage entre 0% et 100% ou une  {{ Xref_csslength() }} sur la ligne de dégradé).
Le rendu des points intermédiaires des dégradés CSS suit les même règles que les points intermédiaires des dégradés SVG.

Histoire de la syntaxe

La syntaxe de linear-gradient a beaucoup évoluée depuis la première proposition d'Apple (en) implémentée en 2008 :

-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

cette syntaxe était déroutante, la même fonction était utilisée pour créer à la fois des dégradés radiaux et linéaires. Les paramètres requis était différents dans chaque cas, signifiant que la syntaxe valide variait selon le premier paramètre. Ceci ne permettait pas d'évoluer si d'autres types de dégradés, comme les dégradés coniques, étaient ajoutés dans le futur. De nombreux paramètres devaient être définis en utilisant des fonctions comme to(), from() ou color-stop() et <point> pouvait contenir des valeurs sans unités, c'est à dire un {{ xref_cssnumber() }}, alors que CSS utilise habituellement une {{ xref_csslength() }} pour les coordonnées. Finalement, aucun brouillon n'a été proposé au W3C.

Par conséquent, une syntaxe alternative a été proposée et implémentée par Mozilla en 2009 : il y a désormais deux fonctions CSS, une pour les dégradés linéaires, une pour les dégradés radiaux. Elle n'a jamais été publiée dans une version publique puisqu'une troisième syntaxe est arrivée et a simplifié la syntaxe pour les dégradés linéaires à :

-moz-linear-gradient([ [ [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);

Plus d'utilité pour to(), from() et color-stop() dans cette nouvelle syntaxe, ils ont été abandonnés. L'ordre des mots-clés top/bottom et left/right n'ayant plus d'importance, Mozilla a retitré la contrainte dictant que top/bottom doivent être définis en premier. La syntaxe avait un point faible, elle ne permettait que des dégradés verticaux et horizontaux.

Cette syntaxe a été proposée au W3C et a été ajoutée en 2011 au brouillon de « CSS Images Values and Content Replacement Level 3 » avec deux modifications additionnelles, résolvant les limitations quant à la direction des dégradés :

  • le support d'un {{ xref_cssangle() }} comme origine, permettant des dégradés dans toutes les directions.
  • la définition de l'algorithme du coin magique qui facilite le travail des développeurs web en permettant une définition aisée de la couleur dans les coins.

L'interpolation des couleurs est aussi définie comme ayant lieu dans l'espace couleur pré-multiplié, de manière à éviter l'apparition d'un gris inesthétique lors de l'utilisation de couleurs avec des opacités différentes. Cette syntaxe a été implémentée, préfixée, par Webkit sans abandonner leur première syntaxe, et trident (IE 10):

linear-gradient([ [ [ <angle> | [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);

Malheureusement, l'ajout des valeurs {{ xref_cssangle() }} à la syntaxe ont introduit une incohérence : l'angle indique une destination, mais les mots-clés un point de départ.# Ceci est corrigé par la nouvelle syntaxe dans laquelle les mots-clés sont également des directions, et ils sont précédés par le mot-clé to.

linear-gradient([ [ [ <angle> | to [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);

Ceci devrait être la syntaxe finale.

Une dernière curiosité sémantique existe entre les variantes préfixées et la proposition sans préfixe. En suivant la proposition initiale de Apple, les variantes préfixées de la syntaxe utilisent toutes un {{ xref_cssangle() }} défini comme un angle polaire, c'est-à-dire que 0deg représente l'est. Pour être cohérent avec le reste de CSS, la spécification définit qu'un angle de 0deg représente le nord. Afin d'éviter que les sites qui utilisent une version préfixée de la propriété soit tout à coup cassés, même s'ils s'adaptent à la syntaxe finale qui est compatible avec le futur, ils gardent la définition originale de l'angle (0deg = est). Ils basculeront vers la spécification correcte lors du retrait du préfixe de la propriété. De même, comme ils ne sont pas incompatibles, Gecko supporte, avec préfixe, les syntaxe avec le mot-clé to et sans. À nouveau, la syntaxe sans le mot-clé sera abandonnée lors de l'abandon du préfixe.

Exemples

Les positions peuvent être spécifiées le long de la ligne de dégradé avec une couleur pour chacune d'elles, appelées « couleurs de transition », et les zones entre les positions intermédiaires sont interpolées. N'importe quelle couleur dans le dégradé forme une ligne qui est perpendiculaire avec l'axe du dégradé. Dans l'image ci-dessous, l'axe de dégradé début dans le coin haut gauche du div, et est dirigé selon un angle de 45 degrés. Deux couleurs sont spécifiées, rouge et bleu.

lingradexample.png

Exemple : positions intermédiaires multiples

Si la première couleur de transition n'a pas de {{ xref_csslength() }} ou de {{ xref_csspercentage() }}, la valeur par défaut est 0%. Si la dernière couleur de transition n'a pas de {{ xref_csslength() }} ou de {{ xref_csspercentage() }}, la valeur par défaut est 100%. Si une couleur de transition n'a pas de position spécifiée et n'est ni la première ni la dernière, elle est assignée à la position qui est au milieu des deux couleurs adjacentes..

Les couleurs de transition doivent être définies dans l'ordre. Après avoir assigné les valeurs par défaut au premières et dernières couleurs si nécessaire, si une couleur de transition a une position spécifiée qui est plus faible que n'importe quelle autre couleur définie avant dans la liste, sa position est modifiée pour être égale à la plus grande des valeurs spécifiées auparavant dans la liste.

Un arc-en-ciel fait d'un dégradé
background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);

Exemples : répétition

La propriété linear-gradient ne permet pas la répétition des dégradés. Par défaut, un dégradé s'étirera pour remplir l'élément sur lequel il est défini. Pour cette fonctionnalité, voir {{ Cssxref("repeating-linear-gradient") }}.

Exemple : utiliser la transparence

Linéaire avec transparence
background-image: linear-gradient(to bottom right, red, rgba(255,0,0,0));

Les arrière-plans en dégradés ne sont pas affectés par {{ Cssxref("background-size") }} si tous les points et les longueurs sont définis avec des unités fixes (en opposition aux pourcentage ou au mots-clés, qui sont relatifs à la valeur de background-size).

Notes

Si vous définissez la propriété {{ cssxref("background-image") }} de l'élément {{ HTMLElement("body") }} à linear-gradient, le dégradé ne remplira pas l'écran sauf si vous définissez aussi la propriété {{ cssxref("min-height") }} de la racine du document (p. ex. l'élément {{ HTMLElement("html") }} ) à 100%.

Spécifications

Spécification État Commentaire
CSS Image Value and Replaced Content Module Level 3 {{ Spec2('CSS3 Images') }}  

Compatibilité des navigateurs

Fonction Firefox (Gecko) Chrome Internet Explorer Opera Safari
Support de base {{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }} {{ bug("479220") }} [3] 10.0 (534.16){{ property_prefix("-webkit") }} [2][3] 10.0 [1] 11.10{{ property_prefix("-o") }} [3] 5.1{{ property_prefix("-webkit") }}[2][3]
Héritage de la syntaxe webkit{{ non-standard_inline() }} {{ CompatNo() }} 3{{ property_prefix("-webkit") }} [2] {{ CompatNo() }} {{ CompatNo() }} 4.0{{ property_prefix("-webkit") }}[2]
Syntaxe ancienne from (sans to) {{ non-standard_inline() }} {{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }} [4] 10.0 (534.16){{ property_prefix("-webkit") }} [2] 10.0 11.10{{ property_prefix("-o") }}[4] 5.1{{ property_prefix("-webkit") }}[2]
syntaxe to

{{ CompatGeckoDesktop("10") }}{{ property_prefix("-moz") }} {{ bug("685400") }} [4]

{{ CompatNo() }} 10.0 11.60{{ property_prefix("-o") }}[4] {{ CompatNo() }}

[1] Internet Explorer 5.5 à 8.0 supporte le filtre propriétaire filter: progid:DXImageTransform.Microsoft.Gradient().

[2] WebKit depuis 528 supporte la fonction -webkit-gradient(linear,…) d'héritage. Depuis WebKit 534.16, la syntaxe standard est aussi supportée. À l'opposé de Gecko, dans WebKit vous ne pouvez pas spécifier à la fois une position et un angle dans -webkit-linear-gradient(). Il est possible d'arriver au même effet en décalant les position intermédiaires.

[3] Gecko, Opera et Webkit considère que {{ xref_cssangle("") }} débute à droite au lieu d'en haut. C'est-à-dire qu'un angle de 0deg pointe vers la droite. Ceci est différent de la dernière spécification dans laquelle l'angle de 0deg indique le haut.

[4] Firefox 3.6 et Opera 11.10 ont implémenté, avec préfixe, une syntaxe précoce dans laquelle le coin ou côté de départ était indiqué sans le mot-clé to et est effectivement considéré comme une position depuis. La syntaxe to a été ajoutée dans Firefox 10 et Opera 11.60, sans retier la syntaxe dépréciée. La traduction entre les deux est triviale :

-moz-linear-gradient(to top left, blue, red);

est équivalent à :

-moz-linear-gradient(bottom right, blue, red);

La syntaxe ancienne, sans to, doit être retirée en même temps que le préfixe.

Dégradés sur plusieurs navigateurs

En considérant tous les préfixes ci-dessus, voici un dégradé allant du rose au vert, de haut en bas. (Code pris depuis css3please.com)

.grad { 

  background-color: #F07575; /* couleur de repli si les dégradés ne sont pas supportés */

  background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 80%, 70%)), to(#BADA55)); 
  background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #BADA55); 
  background-image:    -moz-linear-gradient(top, hsl(0, 80%, 70%), #BADA55); 
  background-image:     -ms-linear-gradient(top, hsl(0, 80%, 70%), #BADA55); 
  background-image:      -o-linear-gradient(top, hsl(0, 80%, 70%), #BADA55); 
  background-image:         linear-gradient(to bottom, hsl(0, 80%, 70%), #BADA55); /* standard actuel, non implémenté */

}

Voir également

Source de la révision

<p>La fonction CSS <code>linear-gradient() </code>créée une {{ xref_cssimage() }} qui représente un dégradé linéaire de couleurs. Le résultat de cette fonction est un objet CSS du type {{ xref_cssgradient() }}. Comme tout autre dégradé, un dégradé linéaire CSS n'est pas une {{ xref_csscolorvalue() }}<span class="lang lang-en"> CSS mais une image</span> <a href="/fr/CSS/image#pas_intrinseque" title="fr/CSS/image#pas_intrinseque">sans dimensions intrinsèques </a>; en d'autres termes, elle n'a pas de taille naturelle ou préférée, ni de proportions préférées. Sa taille s'adapte à l'élément auquel il est appliqué.</p>
<p>Les dégradés linéaires sont définis par un axe, la <em>ligne de dégradé</em>, dont chacun des point est d'une couleur différente. Les lignes perpendiculaires à cette ligne ont une seule couleur, celle correspondant au point d'intersection avec la ligne de dégradé.</p>
<p><img alt="linear-gradient.png" src="/@api/deki/files/5961/=linear-gradient.png" style="float: left;" />La ligne de dégradé est définie par le centre de la boîte contenant le dégradé et un angle. Les couleurs du dégradé sont définies par différents points, le point de départ, le point d'arrivée et entre ces deux, des points intermédiaires optionnels définissant un passage par une couleur précise.</p>
<p>Le point de départ est le point auquel débute le dégradé. Il est défini par l'intersection de la ligne de dégradé et la perpendiculaire passant par le coin de la boîte qui est dans le même quadrant.</p>
<p>De même, le point d'arrivée est le point sur la ligne de dégradé où la couleur finale est atteinte. Il peut aussi être défini comme l'intersection de la ligne de dégradé et la perpendiculaire issue du coin le plus proche, mais il est décris plus simplement comme le symétrique du point de départ dans une symétrie centrale de centre confondu avec le centre de la boîte.</p>
<p>Ces définitions quelque peu complexes des points de départ et d'arrivée amènent à une propriété intéressante parfois appelée les <em>coins magiques</em> : les coins les plus proches des points de départ et d'arrivée ont aussi la même couleur que le point de départ et d'arrivée, respectivement.</p>
<p>Plus de deux couleurs, les couleurs des points de départ et d'arrivée, peuvent être utilisées dans un dégradé linéaire : en définissant des points intermédiaires sur la ligne de dégradé, le développeur web peut maîtriser la coloration en définissant les couleurs à chacun de ces points. Un point intermédiaire peut être défini implicitement, et dans ces cas, il est placé au milieu du point qui le précède et du point qui le devance. Mais ils peuvent être positionnés explicitement en utilisant les types de données CSS {{ xref_csslength() }} ou {{ xref_csspercentage() }}.</p>
<p>Ces points de couleurs permettent de définir des dégradé qui sont la concaténation de plusieurs <code>linear-gradient</code> de base. Mais la syntaxe des dégradés linéaires ne permet pas la répétition des dégradés. Pour une telle fonctionnalité, utilisez la propriété CSS {{ Cssxref("repeating-linear-gradient") }}.</p>
<div class="note">
  Les dégradés, et parmi eux les dégradés linéaires, sont définis comme du type de donnée CSS <code>&lt;image&gt;</code>. Ainsi, ils peuvent être utilisés à n'importe quel endroit où un tel type de donnée est nécessaire. Toutefois, Gecko ne supporte les dégradés CSS comme des valeurs de la propriété {{ Cssxref("background-image") }}, ainsi que dans la propriété raccourcie {{ Cssxref("background") }}.</div>
<h2 id="Syntaxe" style="clear:both;">Syntaxe</h2>
<pre>
linear-gradient( [ [ <em>&lt;angle&gt;</em> | to <em>&lt;side-or-corner&gt;</em> ,]? <em>&lt;color-stop&gt;</em> [, <em>&lt;color-stop&gt;</em>]+ )
</pre>
<p><strong>Préfixes : </strong>référez vous à la table de compatibilité pour le détail des préfixes à utiliser pour les dégradés.</p>
<p>Où :</p>
<dl>
  <dt>
    &lt;color-stop&gt;</dt>
  <dd>
    <p>{{ Xref_csscolorvalue() }} [ {{ Xref_csspercentage() }} | {{ Xref_csslength() }} ]</p>
  </dd>
</dl>
<h3 id="Valeurs">Valeurs</h3>
<dl>
  <dt>
    &lt;side-or-corner&gt;</dt>
  <dd>
    représente la position du point de départ sur la ligne de dégradé. Elle consiste en deux mots-clés : le premier indique le côté selon un axe horizontale, <code>left</code> ou <code>right</code>, et le second le côté selon un axe vertical, <code>top</code> ou <code>bottom</code>. L'ordre n'est pas important et chacun des mots-clés est optionnel.<br />
    les valeurs <code>to top</code>, <code>to bottom</code>, <code>to left</code> et <code>to right</code> sont traduites en termes d'angles <code>0deg</code>, <code>180deg</code>, <code>270deg</code>, <code>90deg</code> respectivement. Les autres sont traduits en un angle qui place le point de départ dans le même quadrant que le coin décrit et tel que la ligne définie par le point de départ et le coin est perpendiculaire à la ligne de dégradé. Ainsi, la couleur définie par <code>&lt;color-stop&gt;</code> sera exactement cette appliquée au coin. Ceci est parfois appelé la propriété des « coins magiques ». Le point d'arrivée de la ligne de dégradé est le symétrique du point de départ situé de l'autre côté du centre de la boîte.</dd>
  <dt>
    &lt;angle&gt;</dt>
  <dd>
    Un angle de direction pour le dégradé. Voir {{ Xref_cssangle() }}.</dd>
  <dt>
    &lt;color-stop&gt;</dt>
  <dd>
    Cette valeur est constituée d'une valeur de {{ Xref_csscolorvalue() }}, suivie d'une position d'arrêt optionnelle (soit un pourcentage entre 0% et 100% ou une&nbsp; {{ Xref_csslength() }} sur la ligne de dégradé).<br />
    Le rendu des points intermédiaires des dégradés CSS suit les même règles que les points intermédiaires des dégradés SVG.</dd>
</dl>
<h3 id="Histoire_de_la_syntaxe">Histoire de la syntaxe</h3>
<p>La syntaxe de <code>linear-gradient</code> a beaucoup évoluée depuis la <a class="external" href="http://www.webkit.org/blog/175/introducing-css-gradients/" hreflang="en" title="http://www.webkit.org/blog/175/introducing-css-gradients/">première proposition d'Apple (en)</a> implémentée en 2008 :</p>
<pre>
<code>-webkit-gradient(&lt;type&gt;, &lt;point&gt; [, &lt;radius&gt;]?, &lt;point&gt; [, &lt;radius&gt;]? [, &lt;stop&gt;]*)</code>
</pre>
<p>cette syntaxe était déroutante, la même fonction était utilisée pour créer à la fois des dégradés radiaux et linéaires. Les paramètres requis était différents dans chaque cas, signifiant que la syntaxe valide variait selon le premier paramètre. Ceci ne permettait pas d'évoluer si d'autres types de dégradés, comme les dégradés coniques, étaient ajoutés dans le futur. De nombreux paramètres devaient être définis en utilisant des fonctions comme <code>to()</code>, <code>from()</code> ou <code>color-stop() </code>et <code>&lt;point&gt;</code> pouvait contenir des valeurs sans unités, c'est à dire un {{ xref_cssnumber() }}, alors que CSS utilise habituellement une {{ xref_csslength() }} pour les coordonnées. Finalement, aucun brouillon n'a été proposé au W3C.</p>
<p>Par conséquent, une syntaxe alternative a été proposée et implémentée par Mozilla en 2009 : il y a désormais deux fonctions CSS, une pour les dégradés linéaires, une pour les dégradés radiaux. Elle n'a jamais été publiée dans une version publique puisqu'une troisième syntaxe est arrivée et a simplifié la syntaxe pour les dégradés linéaires à :</p>
<pre>
-moz-linear-gradient(<code>[ [ [top | bottom] || [left | right] ],]? &lt;color-stop&gt;[, &lt;color-stop&gt;]+);</code>
</pre>
<p>Plus d'utilité pour <code>to()</code>, <code>from()</code> et <code>color-stop()</code> dans cette nouvelle syntaxe, ils ont été abandonnés. L'ordre des mots-clés <code>top</code>/<code>bottom</code> et <code>left</code>/<code>right</code> n'ayant plus d'importance, Mozilla a retitré la contrainte dictant que <code>top</code>/<code>bottom</code> doivent être définis en premier. La syntaxe avait un point faible, elle ne permettait que des dégradés verticaux et horizontaux.</p>
<p>Cette syntaxe a été proposée au W3C et a été ajoutée en 2011 au brouillon de « CSS Images Values and Content Replacement Level 3 » avec deux modifications additionnelles, résolvant les limitations quant à la direction des dégradés :</p>
<ul>
  <li>le support d'un {{ xref_cssangle() }} comme origine, permettant des dégradés dans toutes les directions.</li>
  <li>la définition de l'algorithme du coin magique qui facilite le travail des développeurs web en permettant une définition aisée de la couleur dans les coins.</li>
</ul>
<p>L'interpolation des couleurs est aussi définie comme ayant lieu dans l'espace couleur pré-multiplié, de manière à éviter l'apparition d'un gris inesthétique lors de l'utilisation de couleurs avec des opacités différentes. Cette syntaxe a été implémentée, préfixée, par Webkit sans abandonner leur première syntaxe, et trident (IE 10):</p>
<pre>
linear-gradient(<code>[ [ </code>[ <a href="mks://localhost/en/CSS/angle" title="angle"><em>&lt;angle&gt;</em></a> | <code>[top | bottom] || [left | right] ],]? &lt;color-stop&gt;[, &lt;color-stop&gt;]+);</code>
</pre>
<p>Malheureusement, l'ajout des valeurs {{ xref_cssangle() }} à la syntaxe ont introduit une incohérence : l'angle indique une destination, mais les mots-clés un point de départ.<a class="external" href="http://lists.w3.org/Archives/Public/www-style/2011Jun/0377.html" title="http://lists.w3.org/Archives/Public/www-style/2011Jun/0377.html"># </a>Ceci est corrigé par la nouvelle syntaxe dans laquelle les mots-clés sont également des directions, et ils sont précédés par le mot-clé <code>to</code>.</p>
<pre>
linear-gradient(<code>[ [ </code>[ <a href="mks://localhost/en/CSS/angle" title="angle"><em>&lt;angle&gt;</em></a> | to <code>[top | bottom] || [left | right] ],]? &lt;color-stop&gt;[, &lt;color-stop&gt;]+);</code>
</pre>
<p>Ceci devrait être la syntaxe finale.</p>
<p>Une dernière curiosité sémantique existe entre les variantes préfixées et la proposition sans préfixe. En suivant la proposition initiale de Apple, les variantes préfixées de la syntaxe utilisent toutes un {{ xref_cssangle() }} défini comme un angle polaire, c'est-à-dire que <code>0deg</code> représente l'est. Pour être cohérent avec le reste de CSS, la spécification définit qu'un angle de <code>0deg</code> représente le nord. Afin d'éviter que les sites qui utilisent une version préfixée de la propriété soit tout à coup cassés, même s'ils s'adaptent à la syntaxe finale qui est compatible avec le futur, ils gardent la définition originale de l'angle (<code>0deg</code> = est<code>)</code>. Ils basculeront vers la spécification correcte lors du retrait du préfixe de la propriété. De même, comme ils ne sont pas incompatibles, Gecko supporte, avec préfixe, les syntaxe avec le mot-clé <code>to</code> et sans. À nouveau, la syntaxe sans le mot-clé sera abandonnée lors de l'abandon du préfixe.</p>
<h2 id="Exemples">Exemples</h2>
<p>Les positions peuvent être spécifiées le long de la ligne de dégradé avec une couleur pour chacune d'elles, appelées « couleurs de transition », et les zones entre les positions intermédiaires sont interpolées. N'importe quelle couleur dans le dégradé forme une ligne qui est perpendiculaire avec l'axe du dégradé. Dans l'image ci-dessous, l'axe de dégradé début dans le coin haut gauche du div, et est dirigé selon un angle de 45 degrés. Deux couleurs sont spécifiées, rouge et bleu.</p>
<p><img alt="lingradexample.png" class="internal default" src="/@api/deki/files/3849/=lingradexample.png" style="" /></p>
<h3 id="Exemple_.3A_positions_interm.C3.A9diaires_multiples">Exemple : positions intermédiaires multiples</h3>
<p>Si la première couleur de transition n'a pas de {{ xref_csslength() }} ou de {{ xref_csspercentage() }}, la valeur par défaut est 0%. Si la dernière couleur de transition n'a pas de {{ xref_csslength() }} ou de {{ xref_csspercentage() }}, la valeur par défaut est 100%. Si une couleur de transition n'a pas de position spécifiée et n'est ni la première ni la dernière, elle est assignée à la position qui est au milieu des deux couleurs adjacentes..</p>
<p>Les couleurs de transition doivent être définies dans l'ordre. Après avoir assigné les valeurs par défaut au premières et dernières couleurs si nécessaire, si une couleur de transition a une position spécifiée qui est plus faible que n'importe quelle autre couleur définie avant dans la liste, sa position est modifiée pour être égale à la plus grande des valeurs spécifiées auparavant dans la liste.</p>
<div style="background-image: -moz-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet); 
background-image: -moz-linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
background-image: -webkit-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
background-image: -ms-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
background-image: -o-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet); border: 1px solid black;">
  Un arc-en-ciel fait d'un dégradé</div>
<pre>
background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
</pre>
<h3 id="Exemples_.3A_r.C3.A9p.C3.A9tition">Exemples : répétition</h3>
<p>La propriété <code>linear-gradient</code> ne permet pas la répétition des dégradés. Par défaut, un dégradé s'étirera pour remplir l'élément sur lequel il est défini. Pour cette fonctionnalité, voir {{ Cssxref("repeating-linear-gradient") }}.</p>
<h3 id="Exemple_.3A_utiliser_la_transparence">Exemple : utiliser la transparence</h3>
<div style="background-image: -moz-linear-gradient(top left, red, rgba(255, 0, 0, 0)); background-image: -webkit-linear-gradient(top left, red, rgba(255, 0, 0, 0)); background-image: -o-linear-gradient(top left, red, rgba(255, 0, 0, 0)); background-image: linear-gradient(top left, red, rgba(255, 0, 0, 0)); background-repeat: repeat; background-attachment: scroll; background-position: 0% 0%; background-color: transparent; text-shadow: 1px 1px 0pt black; color: white; border: 1px solid black;">
  Linéaire avec transparence</div>
<pre>
background-image: linear-gradient(to bottom right, red, rgba(255,0,0,0));</pre>
<p>Les arrière-plans en dégradés ne sont pas affectés par {{ Cssxref("background-size") }} si tous les points et les longueurs sont définis avec des unités fixes (en opposition aux pourcentage ou au mots-clés, qui sont relatifs à la valeur de <code>background-size</code>).</p>
<h2 id="Notes">Notes</h2>
<p>Si vous définissez la propriété {{ cssxref("background-image") }} de l'élément {{ HTMLElement("body") }} à <code>linear-gradient</code>, le dégradé ne <a class="external" href="http://richard.milewski.org/archives/1014" hreflang="en" title="http://richard.milewski.org/archives/1014">remplira pas l'écran sauf si </a>vous définissez aussi la propriété {{ cssxref("min-height") }} de la racine du document (p. ex. l'élément {{ HTMLElement("html") }} ) à <code>100%</code>.</p>
<h2 id="Specifications" name="Specifications">Spécifications</h2>
<table class="standard-table">
  <thead>
    <tr style="background-color: rgb(255, 204, 255);">
      <th scope="col">Spécification</th>
      <th scope="col">État</th>
      <th scope="col">Commentaire</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a class="external" href="http://dev.w3.org/csswg/css3-images/#linear-gradients" title="http://dev.w3.org/csswg/css3-images/#linear-gradients">CSS Image Value and Replaced Content Module Level 3</a></td>
      <td>{{ Spec2('CSS3 Images') }}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Compatibilit.C3.A9_des_navigateurs"><a name="AutoCompatibilityTable">Compatibilité des navigateurs</a></h2>
<p><a name="AutoCompatibilityTable"> </a></p>
<table class="compat-table">
  <tbody>
    <tr>
      <th><a name="AutoCompatibilityTable">Fonction</a></th>
      <th><a name="AutoCompatibilityTable">Firefox (Gecko)</a></th>
      <th><a name="AutoCompatibilityTable">Chrome</a></th>
      <th><a name="AutoCompatibilityTable">Internet Explorer</a></th>
      <th><a name="AutoCompatibilityTable">Opera</a></th>
      <th><a name="AutoCompatibilityTable">Safari</a></th>
    </tr>
    <tr>
      <td><a name="AutoCompatibilityTable">Support de base</a></td>
      <td><a name="AutoCompatibilityTable">{{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }} {{ bug("479220") }} </a><a href="#bc3">[3]</a></td>
      <td><a name="AutoCompatibilityTable">10.0 (534.16){{ property_prefix("-webkit") }} </a><a href="#bc2">[2]</a><sup><a href="#bc3">[3]</a></sup></td>
      <td><a name="AutoCompatibilityTable">10.0 </a><a href="#bc1">[1]</a></td>
      <td><a name="AutoCompatibilityTable">11.10{{ property_prefix("-o") }} </a><a href="#bc3">[3]</a></td>
      <td><a name="AutoCompatibilityTable">5.1{{ property_prefix("-webkit") }}</a><a href="#bc2">[2]</a><sup><a href="#bc3">[3]</a></sup></td>
    </tr>
    <tr>
      <td><a name="AutoCompatibilityTable"></a><a class="external" href="http://www.webkit.org/blog/175/introducing-css-gradients/">Héritage de la syntaxe webkit</a>{{ non-standard_inline() }}</td>
      <td>{{ CompatNo() }}</td>
      <td>3{{ property_prefix("-webkit") }} <sup><a href="#bc2">[2]</a></sup></td>
      <td>{{ CompatNo() }}</td>
      <td>{{ CompatNo() }}</td>
      <td>4.0{{ property_prefix("-webkit") }}<sup><a href="#bc2">[2]</a></sup></td>
    </tr>
    <tr>
      <td>Syntaxe ancienne <em>from </em>(sans <code>to</code>) {{ non-standard_inline() }}</td>
      <td>{{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }} <sup><a href="#bc4">[4]</a></sup></td>
      <td>10.0 (534.16){{ property_prefix("-webkit") }} <sup><a href="#bc2">[2]</a></sup></td>
      <td>10.0</td>
      <td>11.10{{ property_prefix("-o") }}<sup><a href="#bc4">[4]</a></sup></td>
      <td>5.1{{ property_prefix("-webkit") }}<sup><a href="#bc2%3E">[2]</a></sup></td>
    </tr>
    <tr>
      <td>syntaxe <code>to </code></td>
      <td>
        <p>{{ CompatGeckoDesktop("10") }}{{ property_prefix("-moz") }} {{ bug("685400") }} <sup><a href="#bc4">[4]</a></sup></p>
      </td>
      <td>{{ CompatNo() }}</td>
      <td>10.0</td>
      <td>11.60{{ property_prefix("-o") }}<sup><a href="#bc4">[4]</a></sup></td>
      <td>{{ CompatNo() }}</td>
    </tr>
  </tbody>
</table>
<p><a name="AutoCompatibilityTable"></a><a name="bc1">[1]</a> Internet Explorer 5.5 à 8.0 supporte le <a class="external" href="http://msdn.microsoft.com/en-us/library/ms532997(VS.85,loband).aspx">filtre propriétaire <code>filter: progid:DXImageTransform.Microsoft.Gradient()</code></a>.</p>
<p><sup><a name="bc2">[2]</a></sup> WebKit depuis 528 supporte la <a class="external" href="http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradients.html">fonction <code>-webkit-gradient(linear,…)</code></a> d'héritage. Depuis WebKit 534.16, la syntaxe standard est aussi supportée. À l'opposé de Gecko, dans WebKit vous ne pouvez pas spécifier à la fois une position et un angle dans <code>-webkit-linear-gradient()</code>. Il est possible d'arriver au même effet en décalant les position intermédiaires.</p>
<p><sup><a name="bc3">[3]</a></sup> Gecko, Opera et Webkit considère que {{ xref_cssangle("") }} débute à droite au lieu d'en haut. C'est-à-dire qu'un angle de <code>0deg</code> pointe vers la droite. Ceci est différent de la dernière spécification dans laquelle l'angle de <code>0deg</code> indique le haut.</p>
<p><sup><a name="bc4">[4]</a></sup>&nbsp;Firefox 3.6 et Opera 11.10 ont implémenté, avec préfixe, une syntaxe précoce dans laquelle le coin ou côté de départ était indiqué sans le mot-clé <code>to</code> et est effectivement considéré comme une position<em> depuis</em>. La syntaxe <code>to</code> a été ajoutée dans Firefox 10 et Opera 11.60, sans retier la syntaxe dépréciée. La traduction entre les deux est triviale :</p>
<pre>
-moz-linear-gradient(to top left, blue, red);</pre>
<p>est équivalent à :</p>
<pre>
-moz-linear-gradient(bottom right, blue, red);</pre>
<p>La syntaxe ancienne, sans <code>to</code>, doit être retirée en même temps que le préfixe.</p>
<h2 id="D.C3.A9grad.C3.A9s_sur_plusieurs_navigateurs">Dégradés sur plusieurs navigateurs</h2>
<p>En considérant tous les préfixes ci-dessus, voici un dégradé allant du rose au vert, de haut en bas. (Code pris depuis <a class="external" href="http://css3please.com/">css3please.com</a>)</p>
<pre class="brush: css">
.grad { 

  background-color: #F07575; /* couleur de repli si les dégradés ne sont pas supportés */

  background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 80%, 70%)), to(#BADA55)); 
  background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #BADA55); 
  background-image:    -moz-linear-gradient(top, hsl(0, 80%, 70%), #BADA55); 
  background-image:     -ms-linear-gradient(top, hsl(0, 80%, 70%), #BADA55); 
  background-image:      -o-linear-gradient(top, hsl(0, 80%, 70%), #BADA55); 
  background-image:         linear-gradient(to bottom, hsl(0, 80%, 70%), #BADA55); /* standard actuel, non implémenté */

}
</pre>
<h2 id="Voir_.C3.A9galement">Voir également</h2>
<ul>
  <li><a href="/fr/Utilisation_de_dégradés" title="fr/Utilisation_de_dégradés">Utilisation des dégradés</a>, {{ cssxref("radial-gradient", "radial-gradient()") }}, {{ cssxref("repeating-linear-gradient", "repeating-linear-gradient()") }}, {{ cssxref("repeating-radial-gradient", "repeating-radial-gradient()") }} ;</li>
  <li>Certaines propriétés sur lequelles cela peut être utilisé : {{ cssxref("background-image") }}, {{ cssxref("background") }} ;</li>
  <li><span class="external">La&nbsp;</span><a class="external" href="http://webkit.org/blog/175/introducing-css-gradients/" title="http://webkit.org/blog/175/introducing-css-gradients/">proposition initiale de WebKit (en)</a> désormais obsolète ;</li>
  <li><a class="external" href="http://leaverou.me/css3patterns/" title="http://leaverou.me/css3patterns/">Gallerie de motifs en dégradés CSS, par Lea Verou (en)</a><span class="external"> ;</span></li>
  <li><a class="external" href="http://standardista.com/cssgradients" title="http://standardista.com/cssgradients">Bibliothèque de dégradés CSS3, par Estelle Weyl (en)</a>.</li>
</ul>
Revenir à cette révision