⌘K

Funkcja linear-gradient

Funkcja linear-gradient ustawia liniowy gradient. Stosuje się do właściwości, które ustawiają obraz tła: background, background-image lub obraz obramowania: border-image, background-image-source.

Składnia

cssselektor {
  background: linear-gradient([kąt lub kierunek], kolor1 rozmiar1, kolor2 rozmiar2...);
}

Wartości

Wartość Opis
kierunek Określa konkretny kierunek gradientu w dowolnych jednostkach kąta albo za pomocą słów kluczowych top, left, right, bottom lub ich kombinacji: top left, top right i tak dalej. Kolejność słów nie ma znaczenia: można pisać top left i left top, różnicy nie ma. Parametr opcjonalny: jeśli nie zostanie podany, gradient będzie biegł od góry do dołu (jak przy to top). Przed kierunkiem stawia się słowo to.
kąt Kąt w dowolnych jednostkach kąta. Może być dodatni lub ujemny. Parametr opcjonalny. Jednocześnie może być podany albo kąt, albo kierunek (albo nic).
kolor1 Kolor początkowy gradientu w dowolnych jednostkach koloru.
kolor2 Kolor końcowy gradientu w dowolnych jednostkach koloru.
rozmiar Określa rozciągłość konkretnego koloru gradientu w dowolnych jednostkach rozmiaru.

Przykład . Najprostsza wersja

Składnia: 

cssselektor {
  background: linear-gradient(kolor początkowy, kolor końcowy);
}

Spójrzmy na przykładzie: 

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

Результат:

Przykład . Dodajemy kąt

Składnia: 

cssselektor {
  background: linear-gradient(kąt, kolor początkowy, kolor końcowy);
}

Spójrzmy na przykładzie: 

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

Результат:

Przykład . Dodajemy kierunek

Zamiast kąta można dodać kierunek top, left, right, bottom lub ich kombinację: top left, top right Przed kierunkiem stawia się słowo to.

Składnia: 

cssselektor {
  background: linear-gradient(kierunek, kolor początkowy, kolor końcowy);
}

Spójrzmy na przykładzie: 

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

Результат:

Przykład . Dodajemy kierunek

Wskażmy inny kierunek: 

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

Результат:

Przykład . Dodajemy rozmiar

Składnia: 

cssselektor {
  background: linear-gradient(kolor1 rozmiar1, kolor2 rozmiar2);
}

W następnym przykładzie zachowanie będzie następujące: czysty czerwony kolor będzie od 0px do 30px, od 30px do 50px będzie gradient od czerwonego do niebieskiego, a od 50px i do końca - czysty niebieski: 

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

Результат:

Przykład . Dodajemy więcej niż 2 kolorów

Składnia: 

cssselektor {
  background: linear-gradient(kolor1 rozmiar1, kolor2 rozmiar2, kolor3 rozmiar3...);
}

W następnym przykładzie zachowanie będzie następujące: czysty czerwony kolor będzie od 0px do 30px, od 30px do 50px będzie gradient od czerwonego do niebieskiego, a od 50px i do 70px - gradient od niebieskiego do zielonego, a po 70px - czysty zielony: 

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

Результат:

Przykład . Ostre przejścia

W następnym przykładzie zachowanie będzie następujące: czysty czerwony kolor będzie od 0px do 30px, czysty niebieski - od 30px do 60px, czysty zielony - po 60px (red 0px można nie pisać): 

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

Результат:

Przykład . Rozmiary można podawać też w procentach

W następnym przykładzie zachowanie będzie następujące: czysty czerwony kolor będzie od 0% do 30%, czysty niebieski - od 30% do 60%, czysty zielony - po 60% (red 0% można nie pisać): 

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

Результат:

Przykład . Połączenie z background-size

W następnym przykładzie zachowanie będzie następujące: czysty czerwony kolor będzie od 0px do 30px, czysty niebieski - od 30px do 60px, przy tym wszystko to będzie powtarzać się kawałkami po 60px (z powodu 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;
}

Результат:

Zobacz też

BackWłaściwość visibilityNextFunkcja radial-gradient