Funkcja CSS linear-gradient()

Funkcja CSS linear-gradient() tworzy gradient liniowy, czyli płynne przejście tonalne między dwoma lub większą liczbą kolorów po linii prostej. Gradienty w CSS są specjalnym rodzajem grafiki, a więc definiujące je funkcje mogą być używane wszędzie tam, gdzie jako wartość jest przyjmowany obraz graficzny, np. we własności background.

Wartości i składnia

Funkcja linear-gradient() ma następującą składnię:

[ [ <kąt> | to <strona-lub-róg> ] || <metoda-interpolacji-kolorów> ]? , <lista-punktów-koloru>

Poniżej znajduje się opis poszczególnych elementów tej składni.

Kąt

Parametr kąt może być dowolną wartością kątową, także ujemną. Określa on kąt ustawienia linii gradientu, który decyduje o kierunku gradientu. Domyślnie gradient liniowy biegnie od góry do dołu, ale za pomocą tego parametru można dowolnie ten kierunek zmienić.

Wartość 0deg oznacza górną krawędź, czyli sprawia, że gradient biegnie od dolnej krawędzi obszaru gradientu do górnej. Wartość 90deg oznacza prawą stronę, 180deg – dół, 270deg lewą stronę, a 360deg – znowu górę itd., np.:

background: linear-gradient(450deg, red, yellow);

Efekt:

Strona lub róg

Ten parametr może przyjmować jedno kierunkowe słowo kluczowe lub dwa takie słowa i jest wprowadzany przez słowo kluczowe to. Jeśli po to podane jest tylko jedno słowo kluczowe, to określa ono stronę, w którą ma biec gradient. Jeśli są podane dwa słowa kluczowe, to określają róg. Oczywiście jeśli używane są dwa słowa kluczowe, to należy je mieszać według zasady po jednym ze zbiorów (left, right) i (top, bottom).

Definicja formalna:

<strona-lub-róg> = [left | right] || [top | bottom]

Przykład:

background: linear-gradient(to bottom right, red, yellow);

Efekt:

Metoda interpolacji kolorów

Ten parametr umożliwia wybór przestrzeni kolorów, w której ma być przeprowadzona interpolacja kolorów gradientu. Składa się on ze słowa kluczowego in, po którym następują nazwa wybranej przestrzeni kolorów, metoda interpolacji (dotyczy tylko przestrzeni polarnych) i słowo kluczowe hue, np.:

background: linear-gradient(to right in hsl longer hue, red, yellow);

Efekt:

Dostępne są dwa rodzaje przestrzeni kolorów: polarne i prostokątne:

Wyróżnia się dwa rodzaje przestrzeni kolorów: polarne i prostokątne:

• Prostokątne przestrzenie kolorów: srgb, srgb-linear, lab, oklab, xyz, xyz-d50, xyz-d65
• Polarne przestrzenie kolorów: hsl, hwb, lch, oklch

Dla polarnych przestrzeni kolorów dostępny jest zestaw dodatkowych opcji pozwalających wybrać kierunek wyboru barw z koła barw:

• shorter – interpolacja po krótszym łuku
• longer – interpolacja po dłuższym łuku
• increasing – wybór łuku zgodnie z kierunkiem ruchu wskazówek zegara
• decreasing – wybór łuku przeciwnie do kierunku ruchu wskazówek zegara

Na stronie Gradienty w CSS znajduje się dokładny opis metod interpolacji kolorów.

Definicje formalne:

<metoda-interpolacji-kolorów> = in [ <prostokątna-przestrzeń-barw> | <polarna-przestrzeń-barw> <metoda-interpolacji-barw>? ]

<prostokątna-przestrzeń-barw> = srgb | srgb-linear | lab | oklab | xyz | xyz-d50 | xyz-d65

<polarna-przestrzeń-barw> = hsl | hwb | lch | oklch

<metoda-interpolacji-barw> = [ shorter | longer | increasing | decreasing ] hue

Lista punktów koloru

Punkty koloru to miejsca na przestrzeni gradientu reprezentujące kolory składające się na ten gradient. Jeśli na przykład gradient składa się z dwóch kolorów, to ma dwa punkty koloru – jeden na początku linii gradientu, a drugi – na jej końcu. Jeśli gradient składa się z pięciu kolorów, to ma pięć punktów koloru.

Dokładny opis punktów koloru znajduje się w sekcji listy Punkty koloru na stronie Gradienty w CSS. Poniżej natomiast znajduje się szczegółowy opis składni tych punktów w funkcji CSS linear-gradient().

Najprostsza lista punktów koloru może zawierać tylko dwie definicje kolorów i nic więcej, np.:

linear-gradient(to right in hsl, red, green)

Dodatkowo między każdą parą kolorów może znajdować się definicja wskazówki koloru, czyli liczba z jednostką długości lub wartość procentowa, określająca pozycję środka przejścia między tymi dwoma kolorami.

Z kolei sama definicja punktu koloru może zawierać tylko definicję koloru, albo definicję koloru i jedną lub dwie liczby z jednostką długości lub wartości procentowe. Jedna liczba z jednostką długości lub wartość procentowa określa umiejscowienie punktu koloru w konkretnym miejscu obszaru gradientu.

Natomiast dwie liczby z jednostką długości lub wartości procentowe określają rozmiar obszaru, na jakim dany kolor jest jednolity, oraz są równoważne z dwiema definicjami tego samego koloru, np. obie poniższe deklaracje znaczą to samo:

linear-gradient(to right in hsl, yellow 10%, red 10% 20%, green 20%)
linear-gradient(to right in hsl, yellow 10%, red 10%, red 20%, green 20%)

Gdyby jedna z powyższych deklaracji została zastosowana do elementu div o szerokości 400 pikseli, to pierwszy punkt koloru czerwonego znalazłby się w odległości 40 pikseli od lewej krawędzi elementu, a drugi – w odległości 80 pikseli od lewej krawędzi. Między nimi znajdowałby się obszar jednolitego koloru czerwonego o szerokości 40 pikseli.

Należy pamiętać, że punkt koloru, to miejsce, w którym dany kolor jest w pełni wyrażony. W powyższym przykładzie punkty kolorów żółtego, czerwonego i zielonego celowo zostały ustawione w taki sposób, aby uzyskać ostre granice między nimi, co ułatwia dostrzeżenie omawianego efektu. Gdyby usunięto wartości procentowe z punktów kolorów żółtego i zielonego, między nimi powstałyby stopniowe przejścia tonalne. W takim przypadku punkty koloru czerwonego nadal znajdowałyby się w tym samym miejscu i kolor czerwony byłby jednolity na tym samym obszarze, ale byłoby to trudniejsze do dostrzeżenia gołym okiem:

linear-gradient(to right in hsl, yellow, red 10% 20%, green)

Składnia formalna listy punktów koloru:

<lista-punktów-koloru> = <punkt-koloru> , [ <wskazówka-koloru>? , <punkt-koloru> ]#

<punkt-koloru> = <kolor> <długość-punktu-koloru>?

<wskazówka-koloru> = <długość-procent>

<długość-punktu-koloru> = <długość-procent>{1,2}

Podsumowanie składni

Poniżej znajduje się podsumowanie składni funkcji CSS linear-gradient().

[ [ <kąt> | to <strona-lub-róg> ] || <metoda-interpolacji-kolorów> ]? , <lista-punktów-koloru>

<strona-lub-róg> = [left | right] || [top | bottom]

<prostokątna-przestrzeń-barw> = srgb | srgb-linear | lab | oklab | xyz | xyz-d50 | xyz-d65

<polarna-przestrzeń-barw> = hsl | hwb | lch | oklch

<metoda-interpolacji-barw> = [ shorter | longer | increasing | decreasing ] hue

<punkt-koloru> = <kolor> <długość-punktu-koloru>?

<wskazówka-koloru> = <długość-procent>

<długość-punktu-koloru> = <długość-procent>{1,2}

Funkcja repeating-linear-gradient()

Funkcja repeating-linear-gradient() ma taką samą składnię, jak funkcja linear-gradient(), ale różni się od niej jednym szczegółem pod względem sposobu działania. Funkcja repeating-linear-gradient() powtarza gradient zdefiniowany między pierwszym i ostatnim punktem koloru tyle razy, ile razy zmieści się on w obszarze gradientu.

Jeśli punkty koloru nie mają określonej długości, to gradient zajmuje całą powierzchnię i wtedy między funkcjami linear-gradient() i repeating-linear-gradient() nie ma różnicy. Działanie funkcji repeating-linear-gradient() staje się widoczne dopiero wtedy, gdy pierwszy i ostatni punkt koloru tworzą obszar o konkretnie określonej szerokości. Spójrz na poniższe przykłady:

repeating-linear-gradient(to right in hsl, yellow, red, green)
repeating-linear-gradient(to right in hsl, yellow, red, green)

Efekt działania tych dwóch funkcji będzie taki sam. A teraz spójrz na poniższe przykłady:

width: 400px;
linear-gradient(to right in hsl, yellow 20px, red 30px, green 40px);

Ta funkcja ustawia trzy punkty koloru, między którymi tworzy krótkie, 10-pikselowe przejścia tonalne. Ostatni punkt koloru, zielony, rozciąga się jednolicie od 40 piksela do końca. Widać to na tym zrzucie ekranu:

A teraz zamienimy funkcję linear-gradient() na repeating-linear-gradient(), ustawienia punktów koloru pozostawiając niezmienione:

width: 400px;
repeating-linear-gradient(to right in hsl, yellow 20px, red 30px, green 40px);

Efekt:

Różnica odległości między pierwszym i ostatnim punktem koloru wynosi 20 pikseli, dlatego funkcja repeating-linear-gradient() powtarza 20-pikselowy fragment (w tym przypadku robi to 20 razy, ponieważ obszar gradientu ma szerokość 400 pikseli, a 400 : 20 = 20).

Podsumowanie