CodeWorlds
Funkcja CSSFunkcje i jednostki

radial-gradient()

Tworzy przejście kolorów rozchodzące się od punktu na zewnątrz, po okręgu albo elipsie. Dobre do poświat, winiet i miękkich świateł.

Na tej stronie

Przykład

#
CSS
.card {
  background:
    radial-gradient(circle at 15% 20%, rgb(124 58 237 / 0.55), transparent 45%),
    radial-gradient(circle at 85% 80%, rgb(14 165 233 / 0.45), transparent 45%),
    #111114;
}
Podgląd

Dwie rozmyte plamy światła w rogach karty to dwa gradienty radialne z przezroczystymi końcami, położone na ciemnym kolorze tła.

Definicja i zastosowanie

#

Funkcja radial-gradient() rysuje kolory rozchodzące się od środka, jak kręgi na wodzie. Pierwszy kolor leży w punkcie początkowym, ostatni na krawędzi kształtu. Tak jak linear-gradient() tworzy obraz, więc używasz jej w background lub background-image.

Kształt to ellipse (domyślnie, dopasowana do proporcji elementu) albo circle. Rozmiar określają słowa kluczowe: farthest-corner (domyślnie, gradient sięga najdalszego rogu), closest-side, closest-corner i farthest-side, albo konkretne wymiary, np. circle 80px czy ellipse 60% 40%.

Środek przesuwasz słowem at: radial-gradient(circle at top left, …) albo at 30% 70%. Kolejność jest stała: najpierw kształt i rozmiar, potem at z pozycją, a dopiero po przecinku kolory, np. radial-gradient(circle 120px at 20% 30%, #7c3aed, transparent).

W praktyce często nakłada się kilka takich gradientów z przezroczystymi końcami, żeby uzyskać kolorowe, rozmyte plamy światła w tle. Jeden gradient świetnie sprawdza się też jako winieta, która przyciemnia brzegi zdjęcia. Wersja repeating-radial-gradient() powtarza pierścienie.

Składnia

#
Składnia
radial-gradient([<kształt> <rozmiar>]? [at <pozycja>]?, <kolor> <pozycja>?, <kolor> <pozycja>?, …)

Warianty zapisu

#

  • #7c3aed, #18181b

    elipsa od środka

    Bez dodatkowych ustawień gradient ma kształt elipsy dopasowanej do elementu i zaczyna się w jego środku.

  • circle

    okrąg

    Słowo circle wymusza okrąg, niezależnie od proporcji elementu.

  • circle at top left

    środek w rogu

    Po at podajesz położenie środka. Światło pada z lewego górnego rogu.

  • circle closest-side

    do najbliższego boku

    Gradient kończy się na najbliższej krawędzi elementu, więc w szerokim prostokącie tworzy wyraźną, okrągłą plamę.

  • #f43f5e 30%, #18181b 30%

    ostra krawędź

    Dwa kolory w tej samej pozycji rysują koło z ostrą krawędzią zamiast poświaty.

  • dwie plamy światła

    kilka warstw

    Dwa gradienty z przezroczystymi końcami i kolor pod spodem. Tak powstają miękkie, kolorowe tła.

  • repeating-radial-gradient()

    pierścienie

    Wzór powtarzany od środka na zewnątrz. Ostre granice dają koncentryczne pierścienie.

Warianty zapisu w praktyce

#

#7c3aed, #18181b

Bez dodatkowych ustawień gradient ma kształt elipsy dopasowanej do elementu i zaczyna się w jego środku.
.demo {
  background: radial-gradient(#7c3aed, #18181b);
}

circle

Słowo circle wymusza okrąg, niezależnie od proporcji elementu.
.demo {
  background:
    radial-gradient(circle, #7c3aed, #18181b);
}

circle at top left

Po at podajesz położenie środka. Światło pada z lewego górnego rogu.
.demo {
  background: radial-gradient(
    circle at top left, #0ea5e9, #18181b);
}

circle closest-side

Gradient kończy się na najbliższej krawędzi elementu, więc w szerokim prostokącie tworzy wyraźną, okrągłą plamę.
.demo {
  background: radial-gradient(
    circle closest-side, #f59e0b, #18181b);
}

#f43f5e 30%, #18181b 30%

Dwa kolory w tej samej pozycji rysują koło z ostrą krawędzią zamiast poświaty.
.demo {
  background: radial-gradient(circle,
    #f43f5e 30%, #18181b 30%);
}

dwie plamy światła

Dwa gradienty z przezroczystymi końcami i kolor pod spodem. Tak powstają miękkie, kolorowe tła.
.demo {
  background:
    radial-gradient(at 20% 30%, #7c3aed, transparent 55%),
    radial-gradient(at 80% 70%, #0ea5e9, transparent 55%),
    #18181b;
}

repeating-radial-gradient()

Wzór powtarzany od środka na zewnątrz. Ostre granice dają koncentryczne pierścienie.
.demo {
  background: repeating-radial-gradient(circle,
    #7c3aed 0 8px, #18181b 8px 16px);
}

Więcej przykładów

#
Winieta na zdjęciu
CSS
.photo {
  background:
    radial-gradient(ellipse, transparent 35%, rgb(0 0 0 / 0.85)),
    url("/collections/covers/programowanie-dla-dzieci.webp") center / cover;
}
Podgląd

Środek zdjęcia zostaje jasny, a brzegi ciemnieją. Winieta kieruje wzrok na środek kadru.

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

#
  • Do miękkich świateł dawaj jako ostatni kolor transparent i nakładaj kilka gradientów w jednym background.
  • Okrąg o stałej wielkości zapiszesz jako circle 80px. Przy circle rozmiar musi być długością, a procenty są dozwolone tylko przy ellipse.
  • Pod gradientami podaj jako ostatnią warstwę zwykły kolor, np. …, #111114. Wypełni miejsca, w których gradienty są przezroczyste.

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