Jak tworzyć gradienty CSS

linear-gradient. Najczęstszy typ. Przejście kolorów wzdłuż linii prostej. Możesz kontrolować kierunek (góra-dół, lewo-prawo, niestandardowy kąt) i dodawać dowolną liczbę stopów kolorów.

radial-gradient. Kolory promieniują od punktu centralnego na zewnątrz, w formie koła lub elipsy. Idealny do tworzenia efektów świetlnych, świecących przycisków lub subtelnych teł.

conic-gradient. Kolory obracają się wokół punktu centralnego, jak sektory koła kolorów. Idealny do wykresów kołowych, wskaźników lub efektów tęczy.

repeating-linear-gradient / repeating-radial-gradient. Wersje powtarzające się, idealne do tworzenia wzorów w paski lub tekstur.

Kolory analogiczne. Wybierz sąsiednie kolory na kole kolorów (niebieski → fioletowy, pomarańczowy → czerwony). Przejścia są naturalnie harmonijne i płynne.

Kolory komplementarne. Przeciwne kolory na kole (niebieski → pomarańczowy). Uwaga: bezpośrednie przejście może stworzyć szarą strefę pośrodku. Dodaj kolor pośredni, aby tego uniknąć.

Monochromatyczne. Warianty tego samego odcienia (jasnoniebieski → ciemnoniebieski). Zawsze eleganckie i profesjonalne. Idealne do subtelnych teł.

Unikaj gwałtownych przejść. Im dalej kolory są na kole, tym więcej stopów pośrednich potrzebujesz, aby wygładzić przejście.

Wskazówka pro: użyj przestrzeni kolorów oklch() dla percepcyjnie jednolitych przejść. Gradienty w oklch są bardziej naturalne niż w RGB.

Krok 1: Wybierz typ. Liniowy, radialny lub stożkowy. Każdy typ ma własne opcje personalizacji.

Krok 2: Wybierz kolory. Użyj selektora kolorów do wyboru stopów. Dodawaj, usuwaj lub zmieniaj kolejność stopów jednym kliknięciem.

Krok 3: Dostosuj kierunek i pozycje. Zmień kąt, punkt startowy i dokładną pozycję każdego stopu dla pełnej kontroli.

Krok 4: Skopiuj kod CSS. Kod CSS jest generowany w czasie rzeczywistym. Skopiuj i wklej bezpośrednio do arkusza stylów.

Podgląd na żywo, historia gradientów i sugestie popularnych palet w zestawie.

Tła sekcji. Subtelny gradient między dwoma bliskimi tonami dodaje głębi bez rozpraszania uwagi od treści. Najczęstsze zastosowanie w nowoczesnym web designie.

Przyciski i CTA. Gradient czyni przyciski bardziej dynamicznymi i atrakcyjnymi niż płaski kolor. Dodaj lekką zmianę gradientu przy najechaniu dla satysfakcjonującego efektu.

Tekst gradientowy. Z background-clip: text możesz zastosować gradient bezpośrednio na tekście. Bardzo modne dla nagłówków i logo.

Nakładki na obrazy. Półprzezroczysty gradient nad obrazem poprawia czytelność nałożonego tekstu.

Obramowania. Border-image z gradientem tworzy kolorowe obramowania niemożliwe z klasycznym border-color.

Gradienty CSS są wydajne. W przeciwieństwie do obrazów, są wektorowe (bez pikselizacji), lekkie (kilka bajtów kodu vs KB obrazu) i renderowane przez GPU.

Preferuj CSS nad obrazami. Gradient CSS jest zawsze szybszy do załadowania i ostrzejszy niż obraz gradientu. Naturalnie dostosowuje się też do wszystkich rozmiarów ekranu.

Ogranicz liczbę stopów. Więcej niż 4-5 stopów sprawia, że kod jest złożony a podgląd trudny. Dla bardzo złożonych gradientów rozważ SVG.

Testuj na mobilnych. Gradienty mogą wyglądać inaczej na ekranach OLED vs LCD. Zawsze testuj na wielu typach ekranów.

Dostępność. Upewnij się, że tekst na tle gradientowym pozostaje czytelny we wszystkich punktach. Sprawdź kontrast WCAG na każdym końcu.