linear-gradient CSS — kompletny przewodnik z przykładami kodu
Funkcja `linear-gradient()` to fundament gradientów w CSS, dostępna w każdej nowoczesnej przeglądarce bez prefiksów. Pozwala tworzyć od prostych dwukolorowych przejść po złożone wielokolorowe wzory, gradienty ukośne, paskowane tła i efekty świetlne. W tym przewodniku omawiamy wszystkie aspekty linear-gradient — składnię, kierunki, przystanki kolorów i zaawansowane techniki — z gotowymi do użycia przykładami kodu CSS.
Składnia linear-gradient — kierunki i kąty
Podstawowa składnia: `background: linear-gradient(kierunek, kolor1, kolor2...)`. Kierunek może być: słowo kluczowe: to bottom (góra→dół, domyślny), to top, to right, to left, to bottom right, to top left itd. kąt: 0deg = to top, 90deg = to right, 180deg = to bottom, 270deg = to left. Dowolny kąt: 45deg to ukośny od lewego dolnego do prawego górnego. Przykłady: `linear-gradient(to right, #0011ff, #ff00ff)` — poziomy gradient niebieski→fioletowy. `linear-gradient(135deg, #1a1a2e, #16213e, #0f3460)` — ukośny, wielokolorowy — popularny dla ciemnych hero sekcji. Kąt 0deg odpowiada kierunkowi "do góry" (co jest nieintuicyjne — gradient idzie od dołu do góry). Dla gradientu od lewej do prawej użyj 90deg lub to right.
Color stops — precyzyjna kontrola przystanków
Color stops to punkty na gradiencie, w których kolor osiąga swoją pełną wartość. Domyślnie rozmieszczone równomiernie, ale możesz je precyzyjnie pozycjonować. Pozycja jako procent: `linear-gradient(to right, red 0%, blue 100%)` — standardowy gradient. `linear-gradient(to right, red 30%, blue 70%)` — gradient zajmuje środkowe 40% przestrzeni, reszta to czysta czerwień/niebieski. Tzw. sharp stops (twarde przejście): `linear-gradient(to right, red 50%, blue 50%)` — czysta połówka, bez płynnego przejścia. Wzory paskowane: `linear-gradient(90deg, red 25%, blue 25%, blue 50%, green 50%, green 75%, yellow 75%)` — cztery równe pasy. Hint (midpoint): `linear-gradient(to right, red, 30%, blue)` — liczba bez koloru przesuwa punkt środkowy przejścia.
Repeating-linear-gradient — wzory i paski
Funkcja `repeating-linear-gradient()` powtarza wzorzec gradientu w nieskończoność — idealna do tworzenia pasków, kratki i innych regularnych wzorów bez SVG lub obrazów. Paski diagonalne: `.stripes { background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0,17,255,0.1) 10px, rgba(0,17,255,0.1) 20px); }` — delikatne ukośne paski 10px. Efekt notebloku: `.lined { background: repeating-linear-gradient(transparent, transparent 27px, #c8c8ff 27px, #c8c8ff 28px); }` — linie co 28px. Gradient z ostrą krawędzią jako separator: `.section { background: linear-gradient(to bottom right, #0011ff 50%, #ffffff 50%); }` — diagonalny podział na pół. Szachownica: łączymy dwa repeating-linear-gradient z background-size. Wzory CSS zastępują obrazy kafelkowe — zero HTTP requestów, doskonałe skalowanie.
Linear gradient w praktyce — przyciski, karty, nakładki
Gradient ma wiele praktycznych zastosowań poza tłem strony. Przyciski gradientowe: `.btn { background: linear-gradient(135deg, #0011ff, #7b00ff); border: none; color: white; padding: 12px 24px; border-radius: 8px; transition: opacity 0.2s; } .btn:hover { opacity: 0.9; }` — zmiana opacity przy hover zamiast przeładowywania gradientu (wydajniejsze). Nakładka na zdjęcie: `.card { background: url(photo.jpg) center/cover; } .card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 60%); }` — tekst u dołu jest czytelny. Gradient border: `.fancy { border: 2px solid transparent; background: linear-gradient(white,white) padding-box, linear-gradient(135deg, #0011ff, #ff00ff) border-box; border-radius: 8px; }` — gradientowe obramowanie. Skeleton loading: animowany gradient jako placeholder ładowania treści.
Często zadawane pytania
- Jak zrobić gradient od koloru do przezroczystości?
- Użyj przezroczystej wersji koloru: `linear-gradient(to bottom, #0011ff, transparent)`. Transparentne słowo kluczowe to rgba(0,0,0,0) — może powodować efekt "szarego" środka przy niektórych kolorach. Lepiej: `linear-gradient(to bottom, #0011ff, rgba(0,17,255,0))` — używaj przezroczystej wersji tego samego koloru.
- Czy linear-gradient działa w IE11?
- IE11 obsługuje linear-gradient bez prefiksu (od IE10). Starsze IE9 wymagają -ms- prefiksu: `-ms-linear-gradient(top, #0011ff, #ff00ff)`. W 2026 IE11 obsługuje mniej niż 0.5% użytkowników, można go zignorować w nowych projektach.
- Jak animować linear-gradient w CSS?
- Animacja background-image (gradientu) bezpośrednio nie jest interpolowalna w CSS. Obejścia: animuj background-position na dużym gradiencie (background-size: 200%), animuj opacity dwóch nakładających się gradientów (::before/::after), użyj CSS Custom Properties z @property (Houdini API) do animacji wartości koloru.