Într-un gradient liniar, culorile curg într-o singură direcție, de exemplu de la stânga la dreapta, de sus în jos sau orice unghi pe care îl alegeți.

Un gradient cu două opriri de culoare
Un gradient liniar cu două opriri de culoare

Sintaxă

Pentru a crea un gradient liniar trebuie să definiți cel puțin două opriri de culoare. Sunt culorile în care sunt create tranzițiile. Este declarat fie pe fundal sau imagine de fundal proprietăți.

background: linear-gradient(direction, colour-stop1, colour-stop2, ...);

Dacă nu este specificată nicio direcție, tranziția implicită este de sus în jos.

Exemple

De sus pana jos:

background: linear-gradient(red, yellow);
De sus pana jos

Lasat sa right:

Pentru a o face de la stânga la dreapta, adăugați un parametru suplimentar la începutul linear-gradient() începând cu cuvântul la care indică direcția:

ad-banner
background: linear-gradient(to right, red , yellow);
De la stânga la dreapta

Diagonală gradienți:

De asemenea, puteți trece un gradient în diagonală, specificând pozițiile de pornire orizontale și verticale, de exemplu, sus-stânga sau jos-dreapta.

Iată un eșantion pentru un gradient care începe din partea stângă sus:

 background: linear-gradient(to bottom right, red, yellow);
Stânga sus

Folosind unghiuri pentru a specifica direcția gradientului

Puteți utiliza, de asemenea, unghiuri, pentru a fi mai exact în specificarea direcției gradientului:

background: linear-gradient(angle, colour-stop1, colour-stop2);

Unghiul este specificat ca un unghi între o linie orizontală și linia de gradient.

background: linear-gradient(90deg, red, yellow);
90 de grade

Folosind mai mult de două culori

Nu sunteți limitat la doar două culori – puteți utiliza câte culori separate prin virgulă doriți.

background: linear-gradient(red, yellow, green); 
Un gradient cu 3 opriri de culoare

De asemenea, puteți utiliza alte sintaxi de culoare, cum ar fi codurile RGB sau hexagonale, pentru a specifica culorile.

Culoarea tare se oprește

Puteți utiliza nu numai gradiente pentru tranziția cu culori decolorate, dar îl puteți folosi și pentru a schimba instantaneu de la o culoare solidă la alta solidă:

background: linear-gradient(to right,red 15%, yellow 15%);
Culoarea tare se oprește

Mai multe informatii:

  • Manualul CSS: un ghid util pentru CSS pentru dezvoltatori