Lineáris gradiensben a színek egyetlen irányban folynak, például balról jobbra, fentről lefelé vagy bármelyik választott szögben.
Szintaxis
Lineáris színátmenet létrehozásához meg kell határoznia legalább két színt. Ezek azok a színek, amelyek között az átmenetek létrejönnek. Vagy a háttér, vagy a háttérkép tulajdonságain van deklarálva .
background: linear-gradient(direction, colour-stop1, colour-stop2, ...);Ha nincs megadva irány, akkor az alapértelmezett átmenet felülről lefelé halad.
Példák
Fentről lefelé:
background: linear-gradient(red, yellow);
Balról r ight:
Balról jobbra váltáshoz adjon hozzá egy további paramétert a kezdet elejére linear-gradient()azzal a szóval , amely jelzi az irányt:
background: linear-gradient(to right, red , yellow);
Átlós gradiensek :
A színátmenetet átlósan is átállíthatja a vízszintes és függőleges kiindulási helyzet megadásával, például balra fent vagy jobbra lent.
Itt van egy minta a bal felső saroktól kezdődő gradiensre:
background: linear-gradient(to bottom right, red, yellow);
A szögek segítségével meghatározhatja a gradiens irányát
Szögeket is használhat, hogy pontosabb legyen a színátmenet irányának meghatározása:
background: linear-gradient(angle, colour-stop1, colour-stop2);A szöget vízszintes vonal és a gradiens vonal közötti szögként adjuk meg.
background: linear-gradient(90deg, red, yellow);
Kétnél több szín használata
Nem korlátozódik csupán két színre - annyi vesszővel elválasztott színt használhat, amennyit csak akar.
background: linear-gradient(red, yellow, green); 
Más színszintaxisokat is használhat, például RGB vagy hex kódokat a színek megadásához.
A kemény szín megáll
A színátmenetekkel nem csak a halványuló színeket lehet áttérni, hanem azt is használhatja, hogy azonnal áttérjen az egyik egyszínűről a másikra:
background: linear-gradient(to right,red 15%, yellow 15%);
Több információ:
- A CSS kézikönyv: praktikus útmutató a CSS-hez a fejlesztők számára