Gradienți liniari în CSS

Gradienți CSS

O trecere lină între două sau mai multe culori în interiorul unui element se obține cu funcțiile de gradient CSS, pe care le dai proprietății background-image.

Există trei tipuri de gradienți:

  • Gradienți Liniari — culorile se schimbă de-a lungul unei linii care merge în jos, în sus, la stânga, la dreapta sau pe diagonală
  • Gradienți Radiali — culorile se extind spre exterior dintr-un punct central
  • Gradienți Conici — culorile se rotesc în jurul unui punct central

Funcția CSS linear-gradient()

Apelează funcția CSS linear-gradient() atunci când culorile trebuie să se schimbe de-a lungul unei linii drepte, fie că aceasta merge în jos, în sus, la stânga, la dreapta sau pe diagonală.

Opririle de culoare sunt culorile care se amestecă, și sunt necesare cel puțin două. O direcție (sau un unghi) și un punct de pornire sunt adăugiri opționale.

De Sus în Jos (implicit)

În acest gradient liniar, roșul stă în partea de sus a elementului și se amestecă în jos, până la galbenul din partea de jos.

Prompt
Afișează un gradient liniar pe un div care merge de sus în jos, începând cu roșu și terminând cu galben. Div-ul trebuie să fie suficient de înalt pentru a vedea clar gradientul.
Rezultat: pagină HTML completă

De Jos în Sus

Inversarea direcției pune roșul în partea de jos a elementului, iar amestecul urcă până ajunge la galbenul din partea de sus.

Prompt
Afișează un gradient liniar pe un div care merge de jos în sus, începând cu roșu și terminând cu galben.
Rezultat: pagină HTML completă

De la Stânga la Dreapta

Mergând în lateral, acest gradient liniar începe cu roșu pe marginea din stânga și ajunge la galben pe marginea din dreapta.

Prompt
Afișează un gradient liniar pe un div care merge de la stânga la dreapta, începând cu roșu și terminând cu galben.
Rezultat: pagină HTML completă

Diagonal

Aici amestecul traversează elementul pe diagonală, cu roșu în colțul din stânga sus și galben în colțul din dreapta jos.

Prompt
Afișează un gradient liniar pe un div care merge diagonal din colțul stânga sus în colțul dreapta jos, începând cu roșu și terminând cu galben.
Rezultat: pagină HTML completă

Sintaxă

styles.css 
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

Gradient Liniar - Folosind Unghiuri

Direcțiile predefinite (to bottom, to top, to right, to left etc.) pot fi înlocuite cu o valoare angle atunci când ai nevoie de un control mai fin asupra direcției în care arată gradientul.

  • „to top” corespunde cu 0deg
  • „to right” corespunde cu 90deg
  • „to bottom” corespunde cu 180deg
  • „to left” corespunde cu 270deg

Exemplu

Cu unghiul setat la 180deg, acest gradient liniar trece de la roșu la galben.

Prompt
Afișează un gradient liniar pe un div folosind un unghi de 180 de grade, de la roșu la galben.
Rezultat: pagină HTML completă

Sintaxă

styles.css 
background-image: linear-gradient(angle, color-stop1, color-stop2);

Gradient Liniar - Mai Multe Opriri de Culoare

Un gradient liniar nu este limitat la două opriri de culoare.

Trei Opriri de Culoare

În acest gradient, trei culori merg de sus în jos: roșu, galben și verde.

Prompt
Afișează un gradient liniar pe un div cu trei opriri de culoare: roșu, galben și verde, mergând de sus în jos.
Rezultat: pagină HTML completă

Gradient Curcubeu

Aici toate culorile curcubeului merg de la stânga la dreapta, cu un text așezat deasupra lor.

Prompt
Afișează un gradient liniar de la stânga la dreapta cu culorile curcubeului (roșu, portocaliu, galben, verde, albastru, indigo, violet) pe un div, cu text alb centrat care spune "Fundal Curcubeu".
Rezultat: pagină HTML completă

Gradient Liniar - Transparență

Efectele de estompare sunt posibile pentru că gradienții CSS pot include transparență.

Setează opririle de culoare cu funcția rgba(), a cărei ultimă valoare controlează transparența pe o scară de la 0 la 1: 0 înseamnă complet transparent, iar 1 înseamnă complet opac (fără transparență).

Exemplu

De la stânga la dreapta, acest gradient începe complet transparent și se termină cu roșu complet.

Prompt
Afișează un gradient liniar pe un div mergând de la stânga la dreapta, începând cu roșu complet transparent (rgba(255,0,0,0)) și terminând cu roșu complet (rgba(255,0,0,1)).
Rezultat: pagină HTML completă

Funcția CSS repeating-linear-gradient()

Ca să repeți un tipar de gradient liniar, folosește funcția CSS repeating-linear-gradient().

Exemplu

Aici tiparul repetat este roșu, apoi galben la 10%, apoi verde la 20%.

Prompt
Afișează un gradient liniar repetat pe un div folosind roșu, galben la 10% și verde la 20%.
Rezultat: pagină HTML completă