Gradient CSS — generator, linear i radial w praktyce

Gradient jako obraz CSS

Gradient jest generowanym obrazem CSS. Może zastąpić plik tła, ale jego zapis i renderowanie nie są bezkosztowe. Nie ma podstaw, by obiecywać każdej stronie redukcję rozmiaru o 40–60%. Porównaj konkretny zasób oraz koszt renderowania w swoim układzie.

Generator gradientów pomaga wybrać kolory i skopiować CSS. Sprawdź kod po wklejeniu, ponieważ wynik zależy także od rozmiaru elementu i warstw tła.

Podstawowe typy

.banner {
  background-color: #243b55;
  background-image: linear-gradient(90deg, #141e30, #243b55);
}

Gradient liniowy biegnie wzdłuż linii. Radialny rozchodzi się od wskazanego punktu, w kształcie koła lub elipsy. Stożkowy — conic-gradient — zmienia kolor wokół punktu. Warianty repeating powtarzają sekwencję. Wsparcie konkretnej składni sprawdź w dokumentacji przeglądarek docelowych; nie istnieje jeden stały procent wsparcia wszystkich wariantów. MDN: gradient.

Kolory i punkty przejścia

Zacznij od dwóch kolorów i dodawaj kolejne, gdy kompozycja tego wymaga. Dwa punkty o tej samej pozycji mogą utworzyć ostrą granicę. Większa liczba kolorów nie jest sama w sobie błędem, a ich odbiór zależy od przestrzeni interpolacji i projektu.

Kontrola przed wdrożeniem

1. Obejrzyj tło w rozmiarze mobilnym i desktopowym.
2. Sprawdź kontrast tekstu we wszystkich miejscach, które tekst może zajmować.
3. Ustaw odpowiedni kolor tła jako wariant awaryjny.
4. Jeśli gradient animujesz, sprawdź koszt renderowania i preferencję ograniczenia ruchu.
5. Przy publikacji w social media wyeksportuj wyrenderowany obraz lub wideo — sam tekst CSS nie jest plikiem graficznym.

Gradient może być dużym tłem lub drobnym akcentem. Wybór powinien wynikać z czytelności i kompozycji, a nie z obietnicy lepszej konwersji.