Generator gradientów CSS
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
Dlaczego używać wizualnego generatora gradientów?
Ręczne pisanie gradientów CSS jest żmudne — zapamiętywanie składni linear-gradient(), radial-gradient() i conic-gradient() z wieloma zatrzymaniami kolorów i pozycjami jest podatne na błędy. Nasz wizualny generator pozwala zarządzać zatrzymaniami kolorów za pomocą selektorów i suwaków pozycji, z podglądem na żywo aktualizującym się natychmiast, co sprawia, że tworzenie gradientów jest szybkie i intuicyjne.
3 typy gradientów
Gradienty liniowe, radialne i stożkowe — wszystkie obsługiwane ze specyficznymi kontrolkami dla każdego typu
Wielokolorowe gradienty
Dodawaj nieograniczoną liczbę zatrzymań kolorów i przeciągaj ich pozycje, aby tworzyć złożone gradienty
Podgląd na żywo
Widzisz gradient renderowany w czasie rzeczywistym podczas regulacji kolorów, pozycji i kąta
Jak tworzyć gradient CSS
Wybierz typ gradientu
Wybierz gradient liniowy, radialny lub stożkowy i ustaw kąt lub kierunek
Konfiguruj zatrzymania kolorów
Użyj selektorów, aby ustawić kolor każdego zatrzymania i suwaków do ich pozycjonowania
Skopiuj CSS
Kliknij 'Kopiuj CSS' dla pełnej właściwości background gotowej do arkusza stylów
Przypadki użycia gradientów CSS
Tła hero
Twórz imponujące tła całej strony z ukośnymi lub radialnymi gradientami
Tekst z gradientem
Stosuj gradienty do tekstu za pomocą background-clip: text dla uderzających efektów typograficznych
Obramowania z gradientem
Używaj gradientów z border-image do tworzenia kolorowych obramowań elementów
Nakładki na obrazy
Nakładaj gradienty na obrazy, aby tworzyć ciemne nakładki umożliwiające czytelność tekstu
Najlepsze praktyki gradientów CSS
✓ Używaj 135deg dla gradientów ukośnych
Kąt 135 stopni tworzy klasyczną przekątną od lewego górnego do prawego dolnego, która wygląda naturalnie i dynamicznie — popularny wybór dla sekcji hero.
✓ Utrzymuj gradienty subtelne dla UI
Dla elementów UI (przyciski, karty) używaj bardzo subtelnych gradientów tego samego tonu z różnicą jasności 10-20%, aby dodać głębię bez wizualnego szumu.
✓ Podaj kolor zapasowy
Dodaj jednolity background-color przed gradientem jako zapas: background-color: #6366f1; background: linear-gradient(...).
✓ Animuj pozycję gradientu
Gradientów CSS nie można bezpośrednio animować, ale można animować background-position na większym gradiencie, aby stworzyć płynny efekt.
❓ Często zadawane pytania
Jaka jest różnica między gradientami liniowymi, radialnymi i stożkowymi?
Gradienty liniowe przechodzą wzdłuż prostej linii pod kątem. Gradienty radialne promieniują z centralnego punktu w kręgach lub elipsach. Gradienty stożkowe obracają się wokół centralnego punktu jak wykres kołowy — idealne dla pierścieni postępu i kół kolorów.
Jak tworzyć przezroczysty gradient?
Użyj transparent jako zatrzymania kolorów: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent). Tworzy to gradient od półprzezroczystego koloru do całkowicie przezroczystego — idealny dla nakładek na obrazy.
Dlaczego mój gradient ma paski?
Pasmowanie (widoczne paski między kolorami) pojawia się na ekranach niskiej jakości lub przy przejściach między podobnymi odcieniami. Dodaj pośrednie zatrzymanie koloru w uzupełniającym tonie, aby wygładzić przejście.
Czy mogę używać gradientów jako obramowań?
Tak, użyj border-image: linear-gradient(...) 1. Ustawia to gradient jako obraz obramowania. Alternatywnie użyj pseudoelementu ::before z gradientowym tłem i ujemnym z-index, aby symulować obramowania z gradientem.