Dokumentacja CSS z przykładami: Gradienty

Q: Jak zrobić gradient radialny w CSS?

Użyj background-image: radial-gradient(#93c5fd, #1e3a8a);. Przed kolorami dodaj kształt i pozycję, na przykład radial-gradient(circle at top left, #93c5fd, #1e3a8a).

Q: Czym różni się circle od ellipse w radial-gradient?

ellipse (domyślnie) rozciąga się do proporcji pudełka, więc w szerokim pudełku jest szeroka. circle utrzymuje okrągły gradient bez względu na kształt pudełka.

Q: Jak ustawić kierunek gradientu liniowego?

Na początku podaj kierunek albo kąt: linear-gradient(to right, red, blue) albo linear-gradient(45deg, red, blue). Domyślnie jest to to bottom (180deg); 0deg wskazuje w górę, a kąty rosną zgodnie z ruchem wskazówek zegara.

Q: Jak zrobić ostre paski zamiast płynnego przejścia?

Nadaj dwóm kolorom tę samą pozycję: linear-gradient(90deg, #2563eb 50%, #f59e0b 50%) zmienia kolor w połowie bez przejścia. repeating-linear-gradient powtarza wzór z takich punktów.

Q: Czy mogę użyć gradientu jako background-color?

Nie. Gradient to obraz, więc trafia do background-image albo skrótu background. background-color: linear-gradient(...) jest niepoprawne i ignorowane.

Gradienty radialne

radial-gradient() miesza kolory od punktu środkowego na zewnątrz. Jak każdy gradient CSS jest obrazem, więc trafia do background-image (albo skrótu background):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Radial gradient</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 12px; flex-wrap: wrap; }
    .box { width: 220px; height: 120px; border-radius: 8px; margin-bottom: 4px; }
    .ellipse { background-image: radial-gradient(#93c5fd, #1e3a8a); }
    .circle { background-image: radial-gradient(circle, #93c5fd, #1e3a8a); }
    .corner { background-image: radial-gradient(circle at top left, #fde68a, #f59e0b 40%, #b45309); }
  </style>
</head>
<body>
  <div class="row">
    <div><div class="box ellipse"></div>ellipse (default)</div>
    <div><div class="box circle"></div>circle</div>
    <div><div class="box corner"></div>circle at top left</div>
  </div>
</body>
</html>

Pełna składnia to radial-gradient(shape size at position, color stops). Wszystko przed kolorami jest opcjonalne.

Część	Wartości	Domyślnie
Kształt	`circle`, `ellipse`	`ellipse`
Rozmiar	`closest-side`, `closest-corner`, `farthest-side`, `farthest-corner` albo długości	`farthest-corner`
Pozycja	`at center`, `at top left`, `at 30% 70%`, `at 20px 40px`	`at center`
Punkty kolorów	Dwa lub więcej kolorów, każdy z opcjonalną pozycją

Słowo kluczowe rozmiaru decyduje, gdzie zostaje osiągnięty ostatni kolor: przy najbliższym boku pudełka, przy najdalszym rogu i tak dalej. Zmień wartości tutaj i obserwuj, jak gradient się przerysowuje:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Radial gradient tester</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #box { height: 160px; margin-top: 10px; border: 1px solid #d1d5db; border-radius: 8px; }
    #out { font-size: 13px; }
  </style>
</head>
<body>
  <label>radial-gradient( <input id="val" value="circle closest-side at 30% 50%, #f59e0b, #2563eb" size="42"> )</label>
  <div id="box"></div>
  <code id="out"></code>
  <script>
    const box = document.getElementById('box');
    const input = document.getElementById('val');
    const show = () => {
      const value = 'radial-gradient(' + input.value + ')';
      const ok = CSS.supports('background-image', value);
      if (ok) box.style.backgroundImage = value;
      document.getElementById('out').textContent = ok ? value : 'invalid gradient';
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Wypróbuj circle farthest-corner at 30% 50%, #f59e0b, #2563eb, ellipse at bottom, white, #16a34a i circle 40px, #f59e0b 99%, transparent (kropka z ostrą krawędzią).

Gradienty liniowe

linear-gradient() miesza kolory wzdłuż prostej linii. Na początku podaj kierunek albo kąt, a potem kolory:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Linear gradient</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 12px; flex-wrap: wrap; }
    .box { width: 160px; height: 90px; border-radius: 8px; margin-bottom: 4px; }
    .down { background-image: linear-gradient(#2563eb, #16a34a); }
    .right { background-image: linear-gradient(to right, #2563eb, #16a34a); }
    .angle { background-image: linear-gradient(45deg, #2563eb, #16a34a); }
    .three { background-image: linear-gradient(to right, #dc2626, #f59e0b, #16a34a); }
  </style>
</head>
<body>
  <div class="row">
    <div><div class="box down"></div>default (to bottom)</div>
    <div><div class="box right"></div>to right</div>
    <div><div class="box angle"></div>45deg</div>
    <div><div class="box three"></div>three colors</div>
  </div>
</body>
</html>

Kąty zaczynają się od 0deg wskazującego w górę i rosną zgodnie z ruchem wskazówek zegara, więc 90deg to to right, a 180deg to domyślne to bottom. to right pozostaje fizycznym kierunkiem na stronach pisanych od prawej do lewej; odwróć go sam, jeśli gradient ma podążać za kierunkiem czytania.

Punkty kolorów i ostre przejścia

Każdy kolor może mieć pozycję. Bez pozycji kolory są rozłożone równomiernie. Gdy dwa kolory mają tę samą pozycję, zmiana jest natychmiastowa, i tak właśnie rysuje się paski, flagi i paski postępu:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Color stops</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .bar { height: 40px; border-radius: 6px; margin: 4px 0 12px; }
    .shifted { background: linear-gradient(to right, #2563eb 70%, #f59e0b); }
    .hard { background: linear-gradient(to right, #2563eb 60%, #e5e7eb 60%); }
    .stripes {
      background: repeating-linear-gradient(45deg,
        #f59e0b 0 12px, #111827 12px 24px);
    }
    .rings { height: 120px; background: repeating-radial-gradient(circle, #2563eb 0 8px, #bfdbfe 8px 16px); }
  </style>
</head>
<body>
  Solid until 70%, then blends
  <div class="bar shifted"></div>
  Hard stop at 60% (a progress bar)
  <div class="bar hard"></div>
  repeating-linear-gradient
  <div class="bar stripes"></div>
  repeating-radial-gradient
  <div class="bar rings"></div>
</body>
</html>

Punkt może też mieć dwie pozycje, #111827 12px 24px, co rysuje jednolity pas od 12px do 24px.

Gradienty stożkowe

conic-gradient() rozprowadza kolory wokół punktu środkowego, jak wskazówki zegara. Z ostrymi przejściami rysuje wykres kołowy bez żadnych obrazów ani JavaScriptu:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Conic gradient</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; display: flex; gap: 24px; }
    .pie {
      width: 140px; height: 140px; border-radius: 50%;
      background: conic-gradient(#2563eb 0 45%, #16a34a 45% 75%, #f59e0b 75%);
    }
    .wheel {
      width: 140px; height: 140px; border-radius: 50%;
      background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
    }
  </style>
</head>
<body>
  <div><div class="pie"></div>45%, 30%, 25%</div>
  <div><div class="wheel"></div>A color wheel</div>
</body>
</html>

Wykres narysowany w CSS jest niewidoczny dla czytników ekranu, więc podaj liczby także w tekście.

Tekst z gradientem

Przytnij tło z gradientem do liter i ustaw sam tekst jako przezroczysty:

.gradient-text {
  background: linear-gradient(90deg, #2563eb, #db2777);
  -webkit-background-clip: text; /* older browsers need the prefix */
  background-clip: text;
  color: transparent;
}

Pamiętaj o zwykłym color jako rozwiązaniu zapasowym: jeśli przycięcie się nie uda, tekst zniknie. Tekst z gradientem ma też nierówny kontrast, więc używaj go tylko w dużych nagłówkach.

Gradienty można nakładać z obrazami i innymi gradientami w jednej liście background-image; warstwy, rozmiar i pozycję omawia strona o obrazie tła.

Częste błędy

background-color: linear-gradient(...). Gradient to obraz: użyj background-image albo background.
Stopnie w złą stronę. 0deg wskazuje w górę, a nie w prawo. 90deg idzie w prawo.
Gradient na elemencie bez wysokości. Nic się nie pokazuje; nadaj mu treść albo rozmiar.
Brudne kolory pośrodku. Mieszanie dwóch nasyconych przeciwstawnych kolorów, jak czerwony i zielony, przechodzi w sRGB przez szarobrązowy. Dodaj punkt pośrodku albo mieszaj w innej przestrzeni kolorów: linear-gradient(in oklch, red, green).
Widoczne pasma na dużych, subtelnych gradientach. Bardzo bliskie kolory na dużym obszarze pokazują stopnie; pomaga trochę większy kontrast między punktami.

Najczęściej zadawane pytania

Jak zrobić gradient radialny w CSS?

Użyj background-image: radial-gradient(#93c5fd, #1e3a8a);. Przed kolorami dodaj kształt i pozycję, na przykład radial-gradient(circle at top left, #93c5fd, #1e3a8a).

Czym różni się circle od ellipse w radial-gradient?

ellipse (domyślnie) rozciąga się do proporcji pudełka, więc w szerokim pudełku jest szeroka. circle utrzymuje okrągły gradient bez względu na kształt pudełka.

Jak ustawić kierunek gradientu liniowego?

Na początku podaj kierunek albo kąt: linear-gradient(to right, red, blue) albo linear-gradient(45deg, red, blue). Domyślnie jest to to bottom (180deg); 0deg wskazuje w górę, a kąty rosną zgodnie z ruchem wskazówek zegara.

Jak zrobić ostre paski zamiast płynnego przejścia?

Nadaj dwóm kolorom tę samą pozycję: linear-gradient(90deg, #2563eb 50%, #f59e0b 50%) zmienia kolor w połowie bez przejścia. repeating-linear-gradient powtarza wzór z takich punktów.

Czy mogę użyć gradientu jako background-color?

Nie. Gradient to obraz, więc trafia do background-image albo skrótu background. background-color: linear-gradient(...) jest niepoprawne i ignorowane.

Powiązane zagadnienia