18. Gradienty w CSS

> Dodaj do ulubionych

Gradienty to p┼éynne przej┼Ťcia tonalne mi─Ödzy kolorami. U┼╝ywa si─Ö ich jako dekoracji w r├│┼╝nych miejscach na stronach internetowych, na przyk┼éad w tle strony albo jako ozdoba przycisk├│w i innych element├│w interfejsu u┼╝ytkownika. Za ich pomoc─ů mo┼╝na uzyska─ç wiele ciekawych efekt├│w wizualnych albo ca┼ékowicie zepsu─ç wygl─ůd strony, je┼Ťli si─Ö przesadziÔÇŽ

W CSS s─ů dost─Öpne specjalne funkcje, kt├│re umo┼╝liwiaj─ů dynamiczne generowanie gradient├│w przez przegl─ůdark─Ö, dzi─Öki czemu nie trzeba ich tworzy─ç w programach graficznych, a potem wstawia─ç na strony w formie obrazk├│w. Funkcji tych mo┼╝na u┼╝ywa─ç wsz─Ödzie tam, gdzie mog─ů by─ç u┼╝ywane obrazy graficzne, a wi─Öc na przyk┼éad jako warto┼Ťci w┼éasno┼Ťci background-image ustawiaj─ůcej obraz t┼éa czy w┼éasno┼Ťci list-style-image ustawiaj─ůcej obraz punktora listy. W specyfikacjach CSS typ danych gradient├│w oznacza si─Ö symbolem <gradient> i traktuje si─Ö go jako specjalny rodzaj grafiki (pozbawiony jednak wymiar├│w naturalnych).

W efekcie gradienty podlegaj─ů wszystkim w┼éasno┼Ťciom dotycz─ůcym obraz├│w, takim jak background-attachment, background-clip i wiele innych.

Typy gradient├│w

W CSS do wyboru s─ů trzy typy gradient├│w: liniowe, promieniste i sto┼╝kowe (nazywane tak┼╝e k─ůtowymi). Najprostszy jest gradient liniowy, kt├│ry ma posta─ç przej┼Ťcia tonalnego mi─Ödzy kolorami po linii prostej. Gradient promienisty rozchodzi si─Ö od punktu centralnego we wszystkie strony, natomiast gradient sto┼╝kowy otacza jeden punkt centralny, jakby zosta┼é namalowany przez wirtualn─ů listw─Ö zaczepion─ů ko┼äcem w tym punkcie.

Je┼Ťli potrzebne jest tylko proste przej┼Ťcie mi─Ödzy dwoma lub wi─Öksz─ů liczb─ů kolor├│w, to definicja ka┼╝dego z dost─Öpnych rodzaj├│w gradient├│w b─Ödzie bardzo prosta i b─Ödzie zawiera┼éa odpowiedni─ů funkcj─Ö z definicjami dw├│ch kolor├│w, np. poni┼╝ej znajduje si─Ö definicja prostego gradientu sto┼╝kowego reprezentuj─ůce przej┼Ťcie od koloru ┼╝├│┼étego do zielonego:

conic-gradient(yellow, green)

Je┼Ťli jednak chcemy tworzy─ç bardziej wyszukane efekty za pomoc─ů tej technologii, na przyk┼éad takie jak pokazane w tej galerii gradient├│w, to musimy pozna─ç j─ů bardziej dog┼é─Öbnie i zaprzyja┼║ni─ç si─Ö z paroma nieskomplikowanymi poj─Öciami z jej dziedziny, takimi jak punkt koloru czy linia gradientu.

Poniewa┼╝ najprostszy jest gradient liniowy, zaczniemy od wprowadzenia do tematu na podstawie tego typu gradientu. Nast─Öpnie przejdziemy do bardziej zaawansowanych zagadnie┼ä, a na koniec przyjrzymy si─Ö dw├│m pozosta┼éym typom – gradientom promienistym i gradientom sto┼╝kowym oraz nauczymy si─Ö tworzy─ç tzw. gradienty powtarzalne.

Gradient liniowy

Gradient liniowy ma posta─ç p┼éynnego przej┼Ťcia tonalnego mi─Ödzy pewn─ů liczb─ů kolor├│w po linii prostej. Najprostszy mo┼╝liwy taki gradient to przej┼Ťcie mi─Ödzy dwoma kolorami od g├│ry do do┼éu. Aby go zdefiniowa─ç, wystarczy u┼╝y─ç funkcji linear-gradient i przekaza─ç jej jako warto┼Ť─ç dwie definicje kolor├│w dowolnego typu obs┼éugiwanego w CSS , rozdzielaj─ůc je przecinkami, np.:

linear-gradient(lightpink, lightgreen);

T─Ö funkcj─Ö mo┼╝emy przekaza─ç jako warto┼Ť─ç w┼éasno┼Ťci background:

background: linear-gradient(lightpink, lightgreen);

Efekt tego działania będzie taki:

Najprostszy mo┼╝liwy gradient liniowy

Zwi─Ökszanie liczby kolor├│w

Je┼Ťli chcemy stworzy─ç przej┼Ťcie mi─Ödzy wi─Öksz─ů liczb─ů kolor├│w, to wystarczy doda─ç kolejne kolory po przecinkach. W poni┼╝szym przyk┼éadzie zosta┼éo u┼╝ytych a┼╝ pi─Ö─ç kolor├│w i w celu pokazania, ┼╝e mo┼╝na je definiowa─ç na r├│┼╝ne sposoby, ka┼╝dy z nich jest okre┼Ťlony za pomoc─ů innego typu sk┼éadni (cho─ç w praktyce lepiej tak nie miesza─ç).

background: linear-gradient(#fb2003, rgb(251 231 3), lab(87 -78 79), blue, #ec03fb33);

Efekt zastosowania tej deklaracji przedstawia poni┼╝szy zrzut ekranu.

Gradient liniowy sk┼éadaj─ůcy si─Ö z pi─Öciu punkt├│w koloru

Wyb├│r kierunku gradientu

Domy┼Ťlnie gradienty liniowe biegn─ů od g├│ry do do┼éu, tzn. pierwszy zdefiniowany kolor zaczyna si─Ö na g├│rze, po czym stopniowo przechodzi w drugi w kierunku dolnej kraw─Ödzi itd., je┼Ťli jest ich wi─Öcej. Taki gradient zosta┼é pokazany w pierwszym przyk┼éadzie na tej stronie.

To domy┼Ťlne ustawienie mo┼╝na zmieni─ç za pomoc─ů s┼éowa kluczowego to, po kt├│rym nale┼╝y wpisa─ç jedno lub dwa kierunkowe s┼éowa kluczowe (top, right, bottom i left), albo za pomoc─ů warto┼Ťci k─ůtowej (bez s┼éowa kluczowego to).

Pojedyncze kierunkowe s┼éowa kluczowe oznaczaj─ů kraw─Öd┼║ elementu, w kierunku kt├│rej ma biec gradient, a wi─Öc to bottom oznacza gradient biegn─ůcy od g├│ry do do┼éu, to right – od lewej do prawej, to left – od prawej do lewej, a to top – od do┼éu do g├│ry, np.:

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

Efekt:

Gradient liniowy od lewej do prawej

Dwa s┼éowa kluczowe wskazuj─ů r├│g, do kt├│rego ma biec gradient zaczynaj─ůcy si─Ö w przeciwnym rogu. Na przyk┼éad warto┼Ť─ç to top right oznacza, ┼╝e gradient b─Ödzie zaczyna┼é si─Ö w lewym dolnym rogu i b─Ödzie bieg┼é do prawego g├│rnego rogu, a warto┼Ť─ç to top left – ┼╝e gradient b─Ödzie zaczyna┼é si─Ö w dolnym prawym rogu i b─Ödzie bieg┼é do g├│rnego lewego rogu itd. Sp├│jrz na poni┼╝szy przyk┼éad:

background: linear-gradient(to top right, red, green);

Efekt:

Gradient do prawego g├│rnego rogu

Zmiana k─ůta gradientu

Je┼Ťli zakres kontroli nad gradientem, jaki daj─ů s┼éowa kluczowe, jest niewystarczaj─ůcy, to mo┼╝na u┼╝y─ç warto┼Ťci k─ůtowej, aby precyzyjnie okre┼Ťli─ç jego k─ůt przebiegu, np.:

background: linear-gradient(210deg, red, green);

Efekt:

Gradient liniowy pod k─ůtem 210 stopni

Warto┼Ťci k─ůtowych mo┼╝na u┼╝ywa─ç tak┼╝e zamiast s┼é├│w kluczowych, np. warto┼Ťci 0deg, 90deg, 180deg i 270deg odpowiadaj─ů kolejno warto┼Ťciom to top, to right, to bottom oraz to left. Ponadto dozwolone jest u┼╝ywanie ujemnych warto┼Ťci k─ůtowych, np.:

background: linear-gradient(-35deg, red, green);

Tyle wiedzy wystarczy, aby tworzy─ç proste gradienty liniowe. Aby jednak rzeczywi┼Ťcie biegle pos┼éugiwa─ç si─Ö gradientami, nale┼╝y zna─ç par─Ö dodatkowych poj─Ö─ç i parametr├│w, kt├│re s─ů opisane poni┼╝ej.

Gradienty dla zaawansowanych

Za pomoc─ů opisanych do tej pory technik mo┼╝na tworzy─ç tylko proste p┼éynne przej┼Ťcia tonalne mi─Ödzy dowoln─ů liczb─ů kolor├│w pod wybranym k─ůtem, ale nie mo┼╝na na przyk┼éad utworzy─ç gradientu, w kt├│rym jeden kolor zajmuje 10% powierzchni, a drugi jej 90%. Do tego potrzebne s─ů tzw. punkty koloru. Zanim wyja┼Ťni─Ö czym s─ů punkty koloru i jak ich u┼╝ywa─ç, najpierw przedstawi─Ö par─Ö innych wa┼╝nych poj─Ö─ç. Wszystkie opisane w tej cz─Ö┼Ťci poj─Öcia dotycz─ů w r├│wnym stopniu ka┼╝dego typu gradient├│w.

Obszar gradientu

Gradienty w CSS s─ů traktowane jak obrazy graficzne, tzn. mog─ů by─ç u┼╝ywane wsz─Ödzie tam, gdzie mo┼╝na u┼╝ywa─ç obraz├│w, ale r├│┼╝ni─ů si─Ö od nich jedn─ů wa┼╝n─ů cech─ů – nie maj─ů wymiar├│w naturalnych. W efekcie o ich rozmiarze decyduje tzw. obszar gradientu (ang. gradient box), czyli obszar elementu, w kt├│rym s─ů renderowane.

Przy domy┼Ťlnych ustawieniach, tzn. je┼Ťli na przyk┼éad gradient jest definiowany w tle elementu blokowego i nie zmieniono domy┼Ťlnej warto┼Ťci w┼éasno┼Ťci background-clip albo background-origin, obszar tego pola zaczyna si─Ö w lewym g├│rnym rogu obszaru dope┼énienia elementu (zobacz Model polowy CSS) – decyduje o tym domy┼Ťlne ustawienie w┼éasno┼Ťci background-origin, kt├│rym jest padding-box. Je┼Ťli si─Ö o tym zapomni, to mo┼╝na uzyska─ç niespodziewany efekt, kt├│ry staje si─Ö dobrze widoczny po zdefiniowaniu szerokiego przerywanego obramowania, np.:

div {
  width: 400px;
  height: 200px;
  border: 15px dotted lightpink;
  background: linear-gradient(to right, red, black);
}

Teraz elementy div w przegl─ůdarce b─Öd─ů wygl─ůda┼éy tak:

Gradient w polu padding-box

Je┼Ťli chcesz, aby gradient obejmowa┼é ca┼ée pole obramowania, musisz zmieni─ç ustawienie w┼éasno┼Ťci background-origin na border-box:

div {
  width: 400px;
  height: 200px;
  border: 15px dotted lightpink;
  background: linear-gradient(to right, red, black);
  background-origin: border-box;
}

Teraz gradient będzie pokrywał tło elementu pod obramowaniem z każdej strony:

Gradient liniowy w polu border-box

W dalszych przyk┼éadach nie pokazuj─Ö ju┼╝ w┼éasno┼Ťci background-origin, ale w przypadkach, w kt├│rych jest to istotne, zak┼éadam, ┼╝e zosta┼éa ona ustawiona na border-box.

Ponadto gradienty podlegaj─ů wszystkim pozosta┼éym w┼éasno┼Ťciom dzia┼éaj─ůcym na obrazy w tle, takim jak background-clip czy background-size. W efekcie wymiary pola gradientu, a wi─Öc te┼╝ samego gradientu ustawionego w tle elementu, s─ů wypadkow─ů tych wszystkich ustawie┼ä.

Je┼Ťli na przyk┼éad w┼éasno┼Ťci background-clip nadamy warto┼Ť─ç content-box, to pole gradientu b─Ödzie mia┼éo wymiary pola tre┼Ťci elementu, a je┼Ťli za pomoc─ů w┼éasno┼Ťci background-size ustawimy wymiary t┼éa na 300 ├Ś 500 pikseli, to w┼éa┼Ťnie takie wymiary b─Ödzie mia┼éo te┼╝ pole gradientu, a wi─Öc te┼╝ sam gradient.

Linia gradientu

Gradient jest rysowany w obszarze pola gradientu wed┼éug tzw. linii gradientu (ang. gradient line), kt├│ra w zale┼╝no┼Ťci od typu gradientu mo┼╝e by─ç te┼╝ spiral─ů lub promieniem. W przypadku gradientu liniowego jest ona lini─ů prost─ů poprowadzon─ů przez ┼Ťrodek pola gradientu i ┼é─ůcz─ůc─ů punkt pocz─ůtkowy (ang. starting point) z punktem ko┼äcowym (ang. ending point) odpowiadaj─ůce pierwszemu i ostatniemu kolorowi gradientu. Gradient liniowy jest rysowany prostopadle do tej linii.

Ta linia mo┼╝e biec pod r├│┼╝nym k─ůtem, w zale┼╝no┼Ťci od ustawie┼ä zdefiniowanych przez u┼╝ytkownika. Je┼Ťli na przyk┼éad gradient liniowy ma zdefiniowany kierunek to right, to jego linia gradientu ┼é─ůczy ┼Ťrodkowy punkt lewej kraw─Ödzi ze ┼Ťrodkowym punktem prawej kraw─Ödzi pola gradientu, jak wida─ç na poni┼╝szej ilustracji.

Linia gradientu do prawej

Ustawienie to right jest r├│wnoznaczne z ustawieniem 90 stopni (90deg), to bottom – z ustawieniem 180 stopni itd. W przypadku ustawienia to bottom punkty pocz─ůtkowy i ko┼äcowy wypad┼éyby odpowiednio na ┼Ťrodku g├│rnej i dolnej kraw─Ödzi obszaru gradientu. Podobnie jest z ustawieniami to left i to top – punkty pocz─ůtkowy i ko┼äcowy wypadaj─ů na ┼Ťrodku odpowiednich kraw─Ödzi obszaru gradientu.

A teraz sp├│jrz na poni┼╝sz─ů definicj─Ö gradientu:

div {
  width: 400px;
  height: 200px;
  background: linear-gradient(to top right, lightpink, lightgreen) border-box;
}

Ten gradient biegnie od lewego dolnego rogu do prawego g├│rnego rogu i wygl─ůda tak:

Gradient liniowy do prawego g├│rnego rogu

Mo┼╝na pomy┼Ťle─ç, ┼╝e skoro ustawienie to right jest r├│wnoznaczne z ustawieniem 90 stopni, to ustawienie to top right powinno by─ç r├│wnoznaczne z ustawieniem 45 stopni. Tak jednak nie jest. Gdyby w powy┼╝szym przyk┼éadzie u┼╝yto warto┼Ťci 45deg zamiast to top right, gradient wygl─ůda┼éby tak:

Gradient liniowy 45 stopni

Ten gradient jest podobny do poprzedniego, ale nie identyczny z nim. Aby zrozumie─ç, sk─ůd bierze si─Ö ta r├│┼╝nica, nale┼╝y u┼Ťwiadomi─ç sobie, ┼╝e gradient liniowy jest rysowany jako seria linii o stopniowo zmieniaj─ůcych si─Ö kolorach (od pocz─ůtkowego do ko┼äcowego) prostopad┼éych do linii gradientu, kt├│rej pocz─ůtek i koniec wyznaczaj─ů punkty pocz─ůtkowy i ko┼äcowy gradientu.

Punkty pocz─ůtkowy i ko┼äcowy gradientu to punkty przeci─Öcia linii gradientu z prostopad┼é─ů do niej lini─ů przechodz─ůc─ů przez wierzcho┼éek pola gradientu znajduj─ůcy si─Ö w tej samej ─çwiartce tego pola. Sp├│jrz na poni┼╝sz─ů ilustracj─Ö.

Definicja punkt├│w pocz─ůtkowego i ko┼äcowego gradientu

Kiedy wi─Öc u┼╝ywamy na przyk┼éad warto┼Ťci to top right, to tylko nakazujemy przegl─ůdarce narysowa─ç gradient, kt├│rego punkt pocz─ůtkowy i ko┼äcowy znajduj─ů si─Ö odpowiednio w lewym dolnym i prawym g├│rnym rogu pola gradientu.

Je┼Ťli natomiast w gradiencie liniowym u┼╝ywamy warto┼Ťci k─ůtowej, np. 45deg, 0.25turn, czy 300rad, to okre┼Ťlamy k─ůt mi─Ödzy lini─ů gradientu a prostopad┼é─ů lini─ů biegn─ůc─ů przez ┼Ťrodek pola gradientu, jak wida─ç na poni┼╝szej ilustracji.

K─ůt gradientu

Zgodnie z zasadami geometrii k─ůt 45 stopni b─Ödzie r├│wnowa┼╝ny ustawieniu to top right tylko wtedy, gdy pole gradientu b─Ödzie kwadratowe. W pozosta┼éych przypadkach b─Ödzie jemu bliski, ale nie identyczny z nim.

Punkty koloru

Jak ju┼╝ wiesz, gradient CSS mo┼╝e obejmowa─ç dowoln─ů liczb─Ö kolor├│w. Pierwszy i ostatni pokrywaj─ů si─Ö ze znanymi Ci ju┼╝ punktami pocz─ůtkowym i ko┼äcowym. Mi─Ödzy nimi mo┼╝e wyst─Öpowa─ç dowolna liczba tzw. punkt├│w koloru (ang. color stop), kt├│re okre┼Ťlaj─ů kolejne „kolorowe przystanki” na drodze gradientu.

Domy┼Ťlnie przegl─ůdarka dzieli lini─Ö gradientu na tyle r├│wnych cz─Ö┼Ťci, ile zosta┼éo zdefiniowanych kolor├│w (minimum dwa), po czym renderuje przej┼Ťcia tonalne mi─Ödzy kolorami wed┼éug tych oblicze┼ä. Je┼Ťli s─ů tylko dwa kolory, to pierwszy zostaje umieszczony w odleg┼éo┼Ťci 0% d┼éugo┼Ťci linii gradientu od punktu pocz─ůtkowego, a drugi – w odleg┼éo┼Ťci 100% d┼éugo┼Ťci linii gradientu od punktu pocz─ůtkowego, czyli w punkcie ko┼äcowym. A gdyby┼Ťmy zdefiniowali pi─Ö─ç kolor├│w, to pierwszy znajdowa┼éby si─Ö w punkcie 0%, drugi – w punkcie 25%, trzeci – w punkcie 50%, czwarty – w punkcie 75%, a pi─ůty – w punkcie 100%, np.:

linear-gradient(to right, red, green, blue, yellow, orange);

Ten gradient w przegl─ůdarce wygl─ůda tak:

Gradient liniowy z oznaczonymi procentowo punktami koloru

W powy┼╝szym przyk┼éadzie zosta┼éy zdefiniowane same kolory, wi─Öc przegl─ůdarka automatycznie rozmie┼Ťci┼éa je r├│wnomiernie na linii gradientu. Mo┼╝liwe jest tak┼╝e samodzielne okre┼Ťlenie po┼éo┼╝enia wszystkich lub wybranych punkt├│w koloru. Mo┼╝na to zrobi─ç przy u┼╝yciu liczby z jednostk─ů d┼éugo┼Ťci lub warto┼Ťci procentowej, kt├│ra odnosi si─Ö do d┼éugo┼Ťci linii gradientu. W takim przypadku po wybranych punktach koloru nale┼╝y wstawi─ç spacj─Ö i doda─ç odpowiedni─ů warto┼Ť─ç, np.:

linear-gradient(to right, green 30%, yellow 40%, orange 50%);

Efekt:

Gradient liniowy z trzema kolorami i okre┼Ťlonymi miejscami rozpocz─Öcia

Powy┼╝sz─ů definicj─Ö gradientu mo┼╝na odczyta─ç nast─Öpuj─ůco: „Zacznij od koloru zielonego i utrzymuj go do punktu 30%, od tego miejsca rozpocznij przechodzenie w kolor ┼╝├│┼éty, kt├│ry pe┼éni─Ö osi─ůga w punkcie 40%. Po przekroczeniu punktu 40% zacznij przechodzenie w kolor pomara┼äczowy, kt├│ry osi─ůga pe┼éni─Ö w punkcie 50% i ma by─ç utrzymywany ju┼╝ do ko┼äca”.

Pozycje kolor├│w mo┼╝na okre┼Ťla─ç tak┼╝e za pomoc─ů dw├│ch warto┼Ťci i w├│wczas pierwsza oznacza pocz─ůtek danego koloru, a druga – jego koniec, czyli miejsce, w kt├│rym powinno zacz─ů─ç si─Ö przechodzenie w kolejny kolor. To umo┼╝liwia uzyskanie jednolitych obszar├│w koloru za pomoc─ů sk┼éadni gradient├│w. Wystarczy tylko pocz─ůtek ka┼╝dego kolejnego koloru ustawi─ç w tym samym punkcie, co koniec poprzedniego, np.:

linear-gradient(to right, red 10%, green 10% 20%, yellow 20% 30%, orange 30% 40%, blue 40% 50%, pink 50% 60%, brown 60% 70%, grey 70% 80%, navy 80% 90%, purple 90%);

Efekt:

Gradient liniowy z dziesi─Öcioma punktami koloru

Oczywi┼Ťcie powy┼╝szy przyk┼éad mo┼╝na napisa─ç tak┼╝e przy u┼╝yciu sk┼éadni z pojedyncz─ů warto┼Ťci okre┼Ťlaj─ůc─ů pozycj─Ö koloru, ale wtedy trzeba by by┼éo kolory definiowa─ç po dwa razy. Poni┼╝sza deklaracja jest r├│wnowa┼╝na z poprzedni─ů:

linear-gradient(to right, red 0, red 10%, green 10%, green 20%, yellow 20%, yellow 30%, orange 30%, orange 40%, blue 40%, blue 50%, pink 50%, pink 60%, brown 60%, brown 70%, grey 70%, grey 80%, navy 80%, navy 90%, purple 90%, purple 100%);

Je┼Ťli kt├│re┼Ť z warto┼Ťci pozycyjnych nie zostan─ů podane, przegl─ůdarka obliczy je automatycznie.

Wracaj─ůc do „normalnych” gradient├│w, CSS daje tak┼╝e kontrol─Ö nad miejscem rozpocz─Öcia przechodzenia z jednego koloru w inny. S┼éu┼╝─ů do tego tzw. wskaz├│wki kolor├│w.

Wskaz├│wki kolor├│w

Wskaz├│wki kolor├│w (ang. color hint) to liczby z jednostk─ů d┼éugo┼Ťci lub warto┼Ťci procentowe okre┼Ťlaj─ůce po┼éo┼╝enie punktu ┼Ťrodkowego przej┼Ťcia mi─Ödzy kolorami. Wskaz├│wk─Ö tak─ů nale┼╝y umie┼Ťci─ç mi─Ödzy tymi kolorami, kt├│rych ona dotyczy, i oddzieli─ç od nich przecinkami. Najpierw sp├│jrz na przyk┼éad bez wskaz├│wek koloru:

div {
  width: 600px;
  height: 150px;
  background: linear-gradient(to right, blue, orange);
}

Teraz punkt ┼Ťrodkowy przej┼Ťcia mi─Ödzy kolorami niebieskim i pomara┼äczowym wypada r├│wno na ┼Ťrodku obszaru gradientu (w odleg┼éo┼Ťci 300 pikseli od jego lewej kraw─Ödzi), poniewa┼╝ nie zdefiniowano ┼╝adnej wskaz├│wki koloru, a linia gradientu pokrywa si─Ö z lini─ů ┼é─ůcz─ůc─ů punkty ┼Ťrodkowe lewej i prawej kraw─Ödzi obszaru gradientu.

Punkt ┼Ťrodkowy przej┼Ťcia mi─Ödzy kolorami bez wskaz├│wek koloru

Teraz zmienimy deklaracj─Ö gradientu przez dodanie do niej wskaz├│wki koloru, kt├│ra przemie┼Ťci punkt ┼Ťrodkowy przej┼Ťcia mi─Ödzy kolorami na miejsce znajduj─ůce si─Ö w odleg┼éo┼Ťci 500 pikseli od pocz─ůtku linii gradientu (kt├│ra w tym przypadku pokrywa si─Ö z poprowadzon─ů przez ┼Ťrodek obszaru gradientu lini─ů ┼é─ůcz─ůc─ů jego lew─ů i praw─ů kraw─Öd┼║).

div {
  width: 600px;
  height: 150px;
  background: linear-gradient(to right, blue, 500px, orange);
}

Teraz uzyskujemy nast─Öpuj─ůcy efekt:

┼Ürodek przej┼Ťcia mi─Ödzy kolorami zmieniony za pomoc─ů wskaz├│wki koloru

Wskaz├│wki kolor├│w mo┼╝na definiowa─ç tak┼╝e w bardziej rozbudowanych gradientach, sk┼éadaj─ůcych si─Ö z wi─Ökszej liczby kolor├│w.

Metody interpolacji kolor├│w

Sk┼éadnia gradient├│w CSS umo┼╝liwia tak┼╝e wyb├│r przestrzeni kolor├│w, w kt├│rej ma by─ç dokonywana interpolacja kolor├│w. Aby skorzysta─ç z tej mo┼╝liwo┼Ťci, nale┼╝y wpisa─ç s┼éowo kluczowe in, a po nim poda─ç nazw─Ö wybranej przestrzeni barw. Cz┼éon ten mo┼╝e znajdowa─ç si─Ö przed cz┼éonem okre┼Ťlaj─ůcym kierunek lub za nim i powinien by─ç od niego oddzielony spacj─ů. Oba poni┼╝sze przyk┼éady s─ů poprawne i r├│wnoznaczne:

linear-gradient(in oklab to right, red, green, blue)
linear-gradient(to right in oklab, red, green, blue)

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

W przypadku przestrzeni polarnych dost─Öpne s─ů dodatkowo opcje metody interpolacji barw: shorter, longer, increasing, decreasing. Aby ich u┼╝y─ç, nale┼╝y poda─ç nazw─Ö wybranej metody i za ni─ů, po spacji, doda─ç s┼éowo kluczowe hue, np.:

linear-gradient(to right in hsl increasing hue, #ed0202, #03278e, #025a0c, #d9d104);

Ka┼╝da para warto┼Ťci okre┼Ťlaj─ůcych k─ůty barw na kole barw przestrzeni polarnej odpowiada dw├│m promieniom, kt├│re „dziel─ů” ko┼éo na dwa ┼éuki. Jeden jest wyznaczony przez te dwa promienie, a drugi powstaje z pozosta┼éej cz─Ö┼Ťci ko┼éa. W zwi─ůzku z tym znaczenie metod interpolacji barw jest nast─Öpuj─ůce:

  • 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

Naj┼éatwiej jest to zrozumie─ç na konkretnym przyk┼éadzie. Sp├│jrz na poni┼╝sz─ů ilustracj─Ö przedstawiaj─ůc─ů ko┼éo barw.

Gradientowe koło barw

Je┼Ťli przyk┼éadowo zdefiniujemy gradient mi─Ödzy kolorami czerwonym i ┼╝├│┼étym w przestrzeni HSL, to za pomoc─ů promieni obw├│d powy┼╝szego ko┼éa podzielimy mniej wi─Öcej na takie dwa ┼éuki:

Gradientowe koło barw z zaznaczonymi promieniami

Teraz w zale┼╝no┼Ťci od ustawie┼ä interpolacji barw mo┼╝emy uzyska─ç r├│┼╝ne efekty. Je┼╝eli zastosujemy metod─Ö shorter, to otrzymamy gradient przechodz─ůcy od czerwieni, przez kolor pomara┼äczowy, w kolor ┼╝├│┼éty (ruch w prawo po kr├│tszym ┼éuku). Je┼Ťli natomiast zastosujemy warto┼Ť─ç longer, to otrzymamy gradient przechodz─ůcy od koloru czerwonego, przez r├│┼╝owy, niebieski i zielony w ┼╝├│┼éty (ruch w lewo po d┼éu┼╝szym ┼éuku). Sp├│jrz na poni┼╝sze przyk┼éady.

Krótszy łuk:

linear-gradient(to right in hsl shorter hue, red, yellow);

Efekt:

Efekt u┼╝ycia metody in hsl shorter hue

Dłuższy łuk:

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

Efekt:

Efekt u┼╝ycia metody in hsl longer hue

Dodatkowo nale┼╝y pami─Öta─ç, ┼╝e kierunek interpolacji barw mo┼╝e by─ç r├│┼╝ny w zale┼╝no┼Ťci od tego, w kt├│rym miejscu na kole warto┼Ťci znajduj─ů si─Ö kolory u┼╝yte w definicji gradientu. Je┼Ťli pierwszy kolor w definicji gradientu znajduje si─Ö bli┼╝ej punktu zerowego (czerwie┼ä) ni┼╝ drugi, to barwy s─ů interpolowane zgodnie z kierunkiem ruchu wskaz├│wek zegara. Je┼Ťli natomiast drugi kolor znajduje si─Ö bli┼╝ej punktu zerowego, barwy s─ů interpolowane w kierunku przeciwnym do kierunku ruchu wskaz├│wek zegara. Dotyczy to tylko sytuacji, kiedy u┼╝ywana jest metoda interpolacji barw.

Podsumowanie składni gradientu liniowego

Poniżej znajduje się zwięzłe podsumowanie składni gradientu liniowego:

linear-gradient([ [ <k─ůt> | to <strona-lub-r├│g> ] || <metoda-interpolacji-kolor├│w> ]? , <lista-punkt├│w-koloru>)

To znaczy, ┼╝e funkcja linear-gradient() jako pierwszy argument przyjmuje opcjonalnie warto┼Ť─ç okre┼Ťlaj─ůc─ů kierunek gradientu (mo┼╝e by─ç wyra┼╝ona w jednostkach k─ůtowych lub za pomoc─ů kierunkowych s┼é├│w kluczowych) i metod─Ö interpolacji kolor├│w. Nast─Öpnie funkcja przyjmuje list─Ö punkt├│w koloru, kt├│ra obejmuje opcjonalne wskaz├│wki koloru i warto┼Ťci okre┼Ťlaj─ůce pozycje kolor├│w.

Szczegółowy opis składni tej funkcji znajduje się na stronie Funkcja CSS linear-gradient().

Gradient promienisty

Gradient promienisty r├│┼╝ni si─Ö od gradientu liniowego tylko paroma szczeg├│┼éami. Przede wszystkim nie biegnie liniowo w jednym kierunku, lecz rozchodzi si─Ö promieni┼Ťcie dooko┼éa punktu centralnego. Ponadto w gradiencie promienistym mo┼╝na okre┼Ťli─ç po┼éo┼╝enie ┼Ťrodka oraz s─ů dost─Öpne specjalne opcje pozwalaj─ůce nada─ç mu kszta┼ét okr─Ögu lub elipsy.

Do tworzenia gradientów promienistych służy funkcja radial-gradient(), która, podobnie jak funkcja linear-gradient(), w najprostszej postaci może przyjmować tylko dwa kolory, np.:

radial-gradient(yellow, green);
Najprostszy mo┼╝liwy gradient promienisty

Funkcja radial-gradient() ma nast─Öpuj─ůc─ů sk┼éadni─Ö:

radial-gradient( [ [ [ <kształt> || <rozmiar> ]? [ at <położenie> ]? ] || <metoda-interpolacji-kolorów>]? , <lista-punktów-koloru>)

Poni┼╝ej znajduje si─Ö zwi─Öz┼éy opis trzech pierwszych parametr├│w – kszta┼étu, rozmiaru i po┼éo┼╝enia. Metody interpolacji kolor├│w i listy punkt├│w koloru zosta┼éy ju┼╝ opisane powy┼╝ej i nie r├│┼╝ni─ů si─Ö pod wzgl─Ödem sposobu dzia┼éania w tym przypadku.

Szczegółowy opis elementów składni funkcji radial-gradient() znajduje się na stronie Funkcja CSS radial-gradient()().

Okre┼Ťlanie kszta┼étu

Gradient promienisty mo┼╝e mie─ç kszta┼ét ko┼éa lub elipsy, za co odpowiadaj─ů warto┼Ťci circle i ellipse. Domy┼Ťlna warto┼Ť─ç to ellipse i przyk┼éad jej dzia┼éania wida─ç na powy┼╝szej ilustracji. Natomiast poni┼╝ej znajduje si─Ö przyk┼éad gradientu w kszta┼écie ko┼éa:

Gradient promienisty w kształcie koła

Okre┼Ťlanie rozmiaru

Rozmiar gradientu promienistego mo┼╝na okre┼Ťli─ç na trzy sposoby: za pomoc─ů s┼é├│w kluczowych i liczby z jednostk─ů d┼éugo┼Ťci (w przypadku obu kszta┼ét├│w) oraz za pomoc─ů liczb z jednostk─ů d┼éugo┼Ťci i warto┼Ťci procentowych (w przypadku elipsy).

Dostępne słowa kluczowe to: closest-side, closest-corner, farthest-side i farthest-corner. Ich szczegółowy opis znajduje się na stronie Funkcja CSS radial-gradient().

Poni┼╝ej znajduje si─Ö przyk┼éad ustawienia dok┼éadnej d┼éugo┼Ťci promienia gradientu w kszta┼écie ko┼éa:

radial-gradient(circle 25px, yellow, green);

Efekt:

Promienisty gradient w kształcie koła o promieniu 25 pikseli

Okre┼Ťlanie po┼éo┼╝enia ┼Ťrodka

Domy┼Ťlnie ┼Ťrodek gradientu promienistego zostaje umieszczony na samym ┼Ťrodku obszar gradientu, ale mo┼╝na to zmieni─ç. W tym celu nale┼╝y u┼╝y─ç s┼éowa kluczowego at i wpisa─ç po nim warto┼Ť─ç okre┼Ťlaj─ůc─ů po┼éo┼╝enie punktu centralnego. Ta sk┼éadnia obs┼éuguje takie same warto┼Ťci, jak w┼éasno┼Ť─ç background-position, np.:

radial-gradient(circle 45px at 290px 140px, yellow, green);

Efekt:

Gradient promienisty z przesuni─Ötym ┼Ťrodkiem

Gradient sto┼╝kowy

Gradient sto┼╝kowy to p┼éynne przej┼Ťcie tonalne mi─Ödzy kolorami „namalowane” przez „wirtualn─ů prowadnic─Ö” obracaj─ůc─ů si─Ö wok├│┼é punktu centralnego, jak wskaz├│wka wok├│┼é ┼Ťrodka tarczy zegara. Przyk┼éadem takiego gradientu jest pokazane wcze┼Ťniej ko┼éo barw.

Do tworzenia gradient├│w sto┼╝kowych s┼éu┼╝y funkcja conic-gradient(), kt├│ra podobnie jak funkcje linear-gradient() i radial-gradient(), w najprostszej postaci mo┼╝e przyjmowa─ç tylko dwie warto┼Ťci kolor├│w, np.:

conic-gradient(red, blue)

Efekt:

Najprostszy gradient stożkowy złożony z dwóch kolorów

Funkcja conic-gradient() ma nast─Öpuj─ůc─ů sk┼éadni─Ö:

[ [ [ from <k─ůt> ]? [ at <po┼éo┼╝enie> ]? ] || <metoda-interpolacji-kolor├│w> ]? , <lista-punkt├│w-koloru>

Parametr k─ůt powinien by─ç poprzedzony s┼éowem kluczowym from i mo┼╝e by─ç warto┼Ťci─ů k─ůtow─ů. Okre┼Ťla on pocz─ůtkowy k─ůt gradientu w kierunku zgodnym z kierunkiem ruchu wskaz├│wek zegara, np.:

conic-gradient(from 90deg, red, blue)

Efekt:

Gradient sto┼╝kowy pod k─ůtem 90 stopni

Po┼éo┼╝enie okre┼Ťla si─Ö tak samo, jak w gradiencie promienistym, czyli przez wpisanie s┼éowa kluczowego at i takiej samej warto┼Ťci, jakie przyjmuje w┼éasno┼Ť─ç background-position.

Szczegółowy opis składni funkcji conic-gradient() znajduje się na stronie Funkcja CSS conic-gradient().

R├│┼╝nica mi─Ödzy gradientem promienistym a gradientem sto┼╝kowym

Gradient promienisty rozchodzi si─Ö we wszystkich kierunkach od punktu ┼Ťrodkowego, a gradient sto┼╝kowy „otacza” punkt ┼Ťrodkowy tak, jakby zosta┼é namalowany przez wirtualn─ů listw─Ö, kt├│ra zosta┼éa przymocowana ko┼äcem do tego punktu i obr├│cona wok├│┼é niego. Poni┼╝sza ilustracja dok┼éadnie pokazuje t─Ö r├│┼╝nic─Ö.

Por├│wnanie gradientu promienistego i sto┼╝kowego

Gradienty powtarzalne

Wszystkie trzy opisane powy┼╝ej funkcje wyst─Öpuj─ů tak┼╝e w wersji powtarzalnej, czyli takiej, kt├│ra rysuje zdefiniowany gradient nie raz, a wiele razy w obr─Öbie obszaru gradientu. Za ich pomoc─ů mo┼╝na uzyska─ç wiele ciekawych efekt├│w wizualnych. Oto te funkcje:

Sk┼éadnia tych funkcji jest taka sama, jak ich „normalnych” odpowiednik├│w, ale r├│┼╝ni─ů si─Ö one od nich jednym szczeg├│┼éem w sposobie dzia┼éania. W gradientach powtarzalnych szeroko┼Ť─ç powielanego obszaru jest r├│wna odleg┼éo┼Ťci mi─Ödzy pierwszym i ostatnim punktem koloru, np.:

div {
  width: 480px;
  height: 200px;
  background: repeating-linear-gradient(to right, red 0 40px, green 40px 80px, blue 80px 120px);
}

W tym przyk┼éadzie odleg┼éo┼Ť─ç mi─Ödzy pierwszym a ostatnim punktem koloru wynosi 120 pikseli (120 px – 0 = 120 px), a szeroko┼Ť─ç elementu zosta┼éa ustawiona na 480 pikseli, w zwi─ůzku z czym powinni┼Ťmy otrzyma─ç cztery grupy tr├│jkolorowych pas├│w (480 : 120 = 4). Poni┼╝szy zrzut ekranu stanowi dow├│d, ┼╝e rzeczywi┼Ťcie tak si─Ö sta┼éo:

Przykładowy powtarzalny gradient liniowy

Analogicznie mo┼╝na tworzy─ç gradienty promieniste i sto┼╝kowe. Sp├│jrz na poni┼╝sz─ů przyk┼éadow─ů definicj─Ö gradientu sto┼╝kowego:

repeating-conic-gradient(red 0 20deg, green 20deg 40deg, orange 40deg 60deg)

Pe┼ény obr├│t gradientu sto┼╝kowego ma 360 stopni, a odleg┼éo┼Ť─ç mi─Ödzy pierwszym i ostatnim punktem koloru w przyk┼éadzie wynosi 60 stopni, wi─Öc powinni┼Ťmy otrzyma─ç sze┼Ť─ç grup po trzy kolorowe pasy:

Przykładowy powtarzalny gradient stożkowy

Gradienty w CSS to bardzo elastyczna technologia, kt├│ra pozwala uzyska─ç wiele atrakcyjnych efekt├│w wizualnych bez u┼╝ywania obraz├│w graficznych. Cho─ç utworzenie prostego gradientu dowolnego typu jest bardzo proste, to uzyskanie bardziej zaawansowanych efekt├│w wymaga ju┼╝ wi─Öcej pracy. Powodzenia!