Propriété: linear-gradient

Propriété: linear-gradient

La fonction linear-gradient permet de créer un dégradé linéaire. Elle prend 3 valeurs, dont 2 sont obligatoires : direction du dégradé (optionnel), couleur de départ, couleur de fin.

La direction du dégradé par défaut est to bottom dans la nouvelle syntaxe (C’est vers où le dégradé va). Dans l’ancienne syntaxe, la direction par défaut était top (C’est d’où le dégradé part).

Exemple pour un dégradé rouge/bleu du haut vers le bas : background: linear-gradient( red, blue);

Dégradé rouge/bleu de la droite vers la gauche, nouvelle syntaxe : background: linear-gradient( to left, red, blue);
Dégradé rouge/bleu de la droite vers la gauche, ancienne syntaxe : background: linear-gradient( right, red, blue);

Propriété: repeating-linear-gradient

La fonction CSS repeating-linear-gradient créé une image composée de dégradés qui se répètent.

Cela fonctionne de manière similaire aux dégradés linéaires simples décrits les mêmes arguments que les dégradés linéaires basiques représentés avec linear-gradient mais les points d'arrêt des couleurs sont automatiquement répétés, indéfiniment, dans les deux directions (les points d'arrêt sont répétés d'autant que la distance qui sépare le premier et le dernier point d'arrêt).

Propriété: radial-gradient

La fonction radial-gradient permet de créer un dégradé radial.

(50% 50%) correspondent à la position en x et en y des cercles vert et bleu.
Le troisième et le quatrième paramètre correspond à la forme du dégradé (ellipse ou circle), et à la taille de celui-ci (closest-side, closest-corner, farthest-side, farthest-corner, contain, cover).
Les trois derniers paramètres sont les couleurs du grand cercle vert, puis du petit cercle bleu, suivi de l’étendue du dégradé en pourcentage.

Propriété: repeating-radial-gradient

La fonction radial-gradient permet de créer un dégradé radial.

(50% 50%) correspondent à la position en x et en y des cercles vert et bleu.
Le troisième et le quatrième paramètre correspond à la forme du dégradé (ellipse ou circle), et à la taille de celui-ci (closest-side, closest-corner, farthest-side, farthest-corner, contain, cover).
Les trois derniers paramètres sont les couleurs du grand cercle vert, puis du petit cercle bleu, suivi de l’étendue du dégradé en pourcentage.

Générateurs de dégradés

http://www.colorzilla.com/gradient-editor/

Mon titre avec dégradé