CodeWorlds
Funkcja CSSFunkcje i jednostki

linear-gradient()

Tworzy płynne przejście kolorów wzdłuż prostej linii. Używa się go jako obrazu, najczęściej w background lub background-image.

Na tej stronie

Przykład

#
CSS
.hero {
  background:
    linear-gradient(to top, rgb(12 12 16 / 0.95), transparent 70%),
    url("/collections/covers/kurs-html-css-od-podstaw.webp") center / cover;
}
Podgląd

Gradient przyciemnia dół zdjęcia, dzięki czemu biały tekst jest czytelny bez względu na to, co znajduje się na obrazku.

Definicja i zastosowanie

#

Funkcja linear-gradient() generuje obraz, w którym kolory płynnie przechodzą jeden w drugi wzdłuż linii prostej. Ponieważ to obraz, a nie kolor, wstawiasz go tam, gdzie CSS przyjmuje obrazy: w background-image lub skrócie background, a także w border-image i mask-image. W background-color ani w color nie zadziała.

Pierwszy, opcjonalny argument to kierunek. Słowa to right albo to bottom right wskazują krawędź lub róg, do którego biegnie gradient, a kąt, np. 45deg, obraca linię: 0deg to kierunek w górę, 90deg w prawo, a domyślne 180deg, czyli to bottom, w dół.

Po kierunku wymieniasz kolory, najmniej dwa. Każdy może mieć pozycję: #7c3aed 20% oznacza, że czysty fiolet zaczyna się w 20% długości gradientu. Dwa kolory w tej samej pozycji dają ostrą granicę zamiast przejścia, co pozwala rysować paski. Wersja repeating-linear-gradient() powtarza wzór w nieskończoność.

W background możesz podać kilka warstw po przecinku, np. półprzezroczysty gradient na zdjęciu, żeby napis na nim był czytelny. Płynną zmianę gradientu najpewniej uzyskasz, animując jego pozycję (background-position) albo zmienną zarejestrowaną przez @property.

Składnia

#
Składnia
linear-gradient([<kąt> | to <strona>]?, <kolor> <pozycja>?, <kolor> <pozycja>?, …)

Warianty zapisu

#

  • #7c3aed, #0ea5e9

    z góry na dół

    Dwa kolory bez kierunku. Domyślnie gradient biegnie z góry na dół.

  • to right

    od lewej do prawej

    Kierunek podany słowami: gradient biegnie w stronę prawej krawędzi.

  • 45deg

    ukośnie

    Kąt obraca linię gradientu. 45 stopni to kierunek do prawego górnego rogu.

  • #7c3aed 30%, #0ea5e9 70%

    przejście w środku

    Czyste kolory do 30% i od 70% długości, a przejście tylko pomiędzy nimi.

  • #7c3aed 50%, #0ea5e9 50%

    ostra granica

    Dwa kolory w tej samej pozycji. Zamiast przejścia jest ostra krawędź, jak na fladze.

  • #f43f5e, #f59e0b, #10b981

    kilka kolorów

    Kolorów może być dowolnie wiele. Bez pozycji przeglądarka rozkłada je w równych odstępach.

  • repeating-linear-gradient()

    paski

    Wzór powtarzany bez końca. Ostre granice co 12 px dają ukośne paski ostrzegawcze.

  • linear-gradient() + url()

    przyciemnione zdjęcie

    Dwie warstwy tła: gradient leży na zdjęciu i przyciemnia jego dół. Na takim tle łatwo umieścić czytelny napis.

Warianty zapisu w praktyce

#

#7c3aed, #0ea5e9

Dwa kolory bez kierunku. Domyślnie gradient biegnie z góry na dół.
.demo {
  background: linear-gradient(#7c3aed, #0ea5e9);
}

to right

Kierunek podany słowami: gradient biegnie w stronę prawej krawędzi.
.demo {
  background:
    linear-gradient(to right, #7c3aed, #0ea5e9);
}

45deg

Kąt obraca linię gradientu. 45 stopni to kierunek do prawego górnego rogu.
.demo {
  background:
    linear-gradient(45deg, #7c3aed, #0ea5e9);
}

#7c3aed 30%, #0ea5e9 70%

Czyste kolory do 30% i od 70% długości, a przejście tylko pomiędzy nimi.
.demo {
  background: linear-gradient(to right,
    #7c3aed 30%, #0ea5e9 70%);
}

#7c3aed 50%, #0ea5e9 50%

Dwa kolory w tej samej pozycji. Zamiast przejścia jest ostra krawędź, jak na fladze.
.demo {
  background: linear-gradient(to right,
    #7c3aed 50%, #0ea5e9 50%);
}

#f43f5e, #f59e0b, #10b981

Kolorów może być dowolnie wiele. Bez pozycji przeglądarka rozkłada je w równych odstępach.
.demo {
  background: linear-gradient(to right,
    #f43f5e, #f59e0b, #10b981);
}

repeating-linear-gradient()

Wzór powtarzany bez końca. Ostre granice co 12 px dają ukośne paski ostrzegawcze.
.demo {
  background: repeating-linear-gradient(45deg,
    #f59e0b 0 12px, #18181b 12px 24px);
}

linear-gradient() + url()

Dwie warstwy tła: gradient leży na zdjęciu i przyciemnia jego dół. Na takim tle łatwo umieścić czytelny napis.
.demo {
  background:
    linear-gradient(transparent, #0c0c10),
    url("/collections/covers/vibe-coding.webp")
      center / cover;
}

Więcej przykładów

#
Tekst wypełniony gradientem
CSS
.title {
  background: linear-gradient(90deg, #a78bfa, #38bdf8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
Podgląd

Tło przycina się do kształtu liter dzięki background-clip: text, a przezroczysty kolor tekstu je odsłania.

Obsługa przeglądarek

#

Szeroko dostępne

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

  • Chrome
  • Edge
  • Firefox
  • Safari

Dobre praktyki

#
  • Gradient to obraz, więc wpisuj go w background lub background-image. W background-color zostanie zignorowany.
  • Między dwa kolory możesz wstawić samą pozycję, np. #7c3aed, 20%, #0ea5e9. To podpowiedź, w którym miejscu przejście ma osiągnąć połowę.
  • Paski i flagi rysuj ostrymi granicami: dwa kolory w tej samej pozycji, np. #000 50%, #fff 50%.

Powiązane hasła

#

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz CSS w kursie HTML i CSSZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs
Używamy cookies, żeby zwiększyć Twoje doświadczenia na stronie
Polityka Prywatności
OK