Exemple:
div {
background: linear-gradient(to right,red,orange,yellow,green,blue,indigo,violet);
}
Un gradient linéaire (linear-gradient) commence à partir d’un bord de l’élément cible et finit au bord opposé.
linear-gradient( <direction>, <colors> )
linear-gradient( <colors> )
<direction> = <angle> | to [top | bottom | left | right]{1,2}
<angle> = [-180..180]deg
<colors> = (<color> [ <length> | <percentage> ]?)[, idem]{1,n}
Quelques exemples:
| Exemple | Rendu |
|---|---|
(white, black) (to bottom, white, black) (180deg, white, black) (-180deg, white, black) (red,yellow,green,blue) |
|
(to top, white, black) (0deg, white, black) |
|
(to right, white, black) (90deg, white, black) |
|
(to left, white, black) (-90deg, white, black) |
|
(to top right, white, black) (45deg, white, black) |
|
(to top left, white, black) (-45deg, white, black) |
|
(to bottom right, white, black) (135deg, white, black) |
|
(to bottom left, white, black) (-135deg, white, black) |
|
(black,white 10px) (black,white 10px,black) (to right,red,yellow 70%,red) (to right,red,yellow 15px,red) |
Exemple:
div {
background: repeating-linear-gradient(135deg, black, black .25em, white 0, white .75em);
}
Le gradient linéaire avec répétition (repeating-linear-gradient) fonctionne de la même manière qu’un dégradé linéaire mais répère les couleurs définies indéfiniment sur la largeur. Ça permet notamment de créer des motifs.
La définition du dégradé est la même qu’un linear-gradient
Quelques exemples:
| Exemple | Rendu |
|---|---|
(135deg, black, black .25em, white 0, white .75em) (45deg,black,white 10px) |
|
(135deg,black,white,black,white,black) + background-size 10px (135deg,black,white,black,white,black) + background-size 20px |
|
(45deg,black,white) + background-size 10px (45deg,black,white) + background-size 20px |
Exemple:
div {
background: radial-gradient(red,orange,yellow,green,blue,indigo,violet);
}
Un gradient radial (radial-gradient) commence à partir d’un point et s’étend jusqu’aux bords.
Plutôt que de contrôler la taille, on peut contrôler jusqu’où le dégradé s’étend: s’arrêter lorsque le cercle touche un côté ou un coin
radial-gradient( <colors> )
radial-gradient( at <position>, <colors> )
radial-gradient( [ circle | <length> ] [ at <position> ]?, <colors> )
radial-gradient( [ ellipse | [ <length> | <percentage> ]{2} ] [ at <position> ]?, <colors> )
radial-gradient( [ circle | ellipse ]? <extent-keyword> [ at <position> ]?, <colors> )
<position> = at [ left | center | right | top | bottom | <percentage> | <length> ]{1,2}
<extent-keyword> = [ closest-corner | closest-side | farthest-corner | farthest-side ]
Quelques exemples:
| Exemple | Rendu |
|---|---|
(white, black) (ellipse,white,black) (circle,white,black) (10px, white, black) (20px 10px, white, black) (ellipse 25% 25%, white, black) |
|
(black, white, black) (black, white 25px, black) (black, white 25%, black) |
|
(farthest-side, white, black) (farthest-side at 30% 50%, white, black) (closest-side, white, black) (closest-side at 30% 50%, white, black) (farthest-corner, white, black) (farthest-corner at 30% 50%, white, black) (closest-corner, white, black) (closest-corner at 30% 50%, white, black) |
|
(ellipse farthest-side at 50% 0, white, black 25%, white 75%, black) (ellipse farthest-side at 0 50%, white, black 25%, white 75%, black) (circle closest-side at 20% 50%, white, white 25%, black 50%, white 75%, black) (circle closest-side at 20%, white, white 25%, black 50%, white 75%, black) |
|
Exemple:
div.repeating-gradient {
background: repeating-radial-gradient(black 10px, #009966, purple 50px);
}
div.background-size {
background: radial-gradient(black 1px, #009966, purple 10px);
background-size: 10px 10px;
}
Un gradial radial avec répétition (repeating-radal-gradient) se répéte infiniment, toujours à partir du point d’origine — tandis qu’utiliser radial-gradient avec background-size aura pour effet de répéter la même forme à partir de différents points d’origine.
La définition est identique à radial-gradient