⌘K

Funkcija linear-gradient

Funkcija linear-gradient zadaje linearni gradient. Primjenjuje se na svojstva koja zadaju sliku pozadine: background, background-image ili sliku granice: border-image, background-image-source.

Sintaksa

cssselektor {
  background: linear-gradient([ugao ili smer], boja1 veličina1, boja2 veličina2...);
}

Vrednosti

Vrednost Opis
smer Zadaje određeni smer gradienta u bilo kojim jedinicama za uglove ili ključnim rečima top, left, right, bottom ili njihovom kombinacijom: top left, top right i tako dalje. Red reči nije važan: može se pisati top left i left top, razlike nema. Parametar nije obavezan: ako se ne napiše, gradient će ići odozgo nadole (kao kod to top). Ispred smera stavlja se reč to.
ugao Ugao u bilo kojim jedinicama za uglove. Može biti pozitivan ili negativan. Parametar nije obavezan. Istovremeno može biti zadat ili ugao, ili smer (ili ništa).
boja1 Početna boja gradienta u bilo kojim jedinicama za boju.
boja2 Krajnja boja gradienta u bilo kojim jedinicama za boju.
veličina Zadaje protezanje određene boje gradienta u bilo kojim jedinicama za veličinu.

Primer . Najjednostavnija varijanta

Sintaksa: 

cssselektor {
  background: linear-gradient(početna boja, krajnja boja);
}

Pogledajmo na primeru: 

html<div id="elem"></div>
css#elem {
  background: linear-gradient(black, red);
  width: 200px;
  height: 200px;
}

Результат:

Primer . Dodajemo ugao

Sintaksa: 

cssselektor {
  background: linear-gradient(ugao, početna boja, krajnja boja);
}

Pogledajmo na primeru: 

html<div id="elem"></div>
css#elem {
  background: linear-gradient(45deg, black, red);
  width: 200px;
  height: 200px;
}

Результат:

Primer . Dodajemo smer

Umesto ugla možemo dodati smer top, left, right, bottom ili njihovu kombinaciju: top left, top right Ispred smera stavlja se reč to.

Sintaksa: 

cssselektor {
  background: linear-gradient(smer, početna boja, krajnja boja);
}

Pogledajmo na primeru: 

html<div id="elem"></div>
css#elem {
  background: linear-gradient(to left, black, red);
  width: 200px;
  height: 200px;
}

Результат:

Primer . Dodajemo smer

Navedimo drugi smer: 

html<div id="elem"></div>
css#elem {
  background: linear-gradient(to top left, black, red);
  width: 200px;
  height: 200px;
}

Результат:

Primer . Dodajemo veličinu

Sintaksa: 

cssselektor {
  background: linear-gradient(boja1 veličina1, boja2 veličina2);
}

U sledećem primeru ponašanje će biti sledeće: čista crvena boja će biti od 0px do 30px, od 30px do 50px biće gradient od crvene do plave, a od 50px i do kraja - čista plava boja: 

html<div id="elem"></div>
css#elem {
  background: linear-gradient(red 30px, blue 50px);
  width: 200px;
  height: 200px;
}

Результат:

Primer . Dodajemo više od 2 boje

Sintaksa: 

cssselektor {
  background: linear-gradient(boja1 veličina1, boja2 veličina2, boja3 veličina3...);
}

U sledećem primeru ponašanje će biti sledeće: čista crvena boja će biti od 0px do 30px, od 30px do 50px biće gradient od crvene do plave, a od 50px i do 70px - gradient od plave do zelene, a posle 70px - čista zelena boja: 

html<div id="elem"></div>
css#elem {
  background: linear-gradient(red 30px, blue 50px, green 70px);
  width: 200px;
  height: 200px;
}

Результат:

Primer . Oštri prelazi

U sledećem primeru ponašanje će biti sledeće: čista crvena boja će biti od 0px do 30px, čista plava - od 30px do 60px, čista zelena - posle 60px (red 0px se takođe može ne napisati): 

html<div id="elem"></div>
css#elem {
  background: linear-gradient(red 0px, red 30px, blue 30px, blue 60px, green 60px);
  width: 200px;
  height: 200px;
}

Результат:

Primer . Veličine se mogu zadavati i u procentima

U sledećem primeru ponašanje će biti sledeće: čista crvena boja će biti od 0% do 30%, čista plava - od 30% do 60%, čista zelena - posle 60% (red 0% se takođe može ne napisati): 

html<div id="elem"></div>
css#elem {
  background: linear-gradient(red 0%, red 30%, blue 30%, blue 60%, green 60%);
  width: 200px;
  height: 200px;
}

Результат:

Primer . Kombinacija sa background-size

U sledećem primeru ponašanje će biti sledeće: čista crvena boja će biti od 0px do 30px, čista plava - od 30px do 60px, pri čemu će se sve ovo ponavljati komadićima po 60px (zbog background-size: 60px;): 

html<div id="elem"></div>
css#elem {
  background: linear-gradient(to right, red 30px, blue 30px, blue 60px);
  background-size: 60px 60px;
  width: 200px;
  height: 200px;
}

Результат:

Pogledajte takođe

BackSvojstvo visibilityNextFunkcija radial-gradient