Kluczowe punkty
- 01Obsługiwane są wszystkie trzy typy gradientów CSS — liniowy, radialny i stożkowy — z podglądem na żywo.
- 02Dodaj do sześciu punktów kolorów, każdy z niezależną pozycją i kolorem.
- 03Wynik to kompletna deklaracja background gotowa do wklejenia w dowolny arkusz stylów.
- 04Bez rejestracji, bez instalacji i nic się nie przesyła — wszystko działa w Twojej przeglądarce.
Dlaczego warto używać wizualnego generatora gradientów?
Pisanie gradientów CSS ręcznie szybko się nudzi. Składnia jest czytelna, gdy ją znasz, ale wybieranie dokładnych pozycji punktów i kolorów bez podglądu wizualnego zamienia prostą decyzję projektową w metodę prób i błędów w DevTools. Generator pozwala zobaczyć wynik w czasie rzeczywistym i wyeksportować czysty kod, gdy tylko będzie wyglądać dobrze.
To narzędzie obsługuje wszystkie trzy nowoczesne typy gradientów. Liniowy to klasyczne przejście kierunkowe, które użyjesz dla tła sekcji hero i przycisków. Radialny rozprzestrzenia się od punktu — świetny do efektów oświetlenia i vignet. Stożkowy obraca się wokół środka, co czyni go idealnym do segmentów wykresów kołowych, kół barw i wskaźników obracających się. Zacznij od jednego z wbudowanych presetów (Lime Swiss, Sunset, Sky, Aurora) lub projektuj od zera.
Jak wygenerować gradient CSS
Cały proces zajmuje mniej niż minutę.
- 01
Wybierz typ gradientu
Wybierz Liniowy, Radialny lub Stożkowy z selektora typu. Dla gradientu liniowego ustaw również kąt. Podgląd aktualizuje się natychmiast.
- 02
Dodaj i pozycjonuj punkty kolorów
Kliknij Dodaj punkt, aby wstawić nowy punkt, a następnie przeciągnij jego suwak lub wpisz procent, aby go pozycjonować. Obsługiwane są do sześciu punktów — punkty automatycznie sortują się według pozycji.
- 03
Wybierz kolor każdego punktu
Kliknij próbkę koloru, aby otworzyć systemowy selektor kolorów, lub wpisz wartość heksadecymalną bezpośrednio. Działają zarówno formaty RGB, jak i heksadecymalne.
- 04
Podgląd w czasie rzeczywistym
Panel podglądu renderuje Twój gradient za pomocą natywnego silnika gradientów przeglądarki, więc wynik dokładnie odpowiada temu, co CSS będzie produkować w produkcji.
- 05
Skopiuj deklarację CSS
Kliknij Kopiuj, aby pobrać kompletną deklarację background: linear-gradient(...). Wklej ją w arkusz stylów, komponent stylizowany lub wartość arbitralną Tailwind, taką jak bg-[<value>].
Typowe przypadki użycia gradientów
Każdy typ gradientu doskonale sprawdza się w innym scenariuszu.
- 01Tła sekcji hero — gradient liniowy pod kątem 135° dla nowoczesnego ukośnego przejścia.
- 02Stany najechania przycisków — subtelny gradient liniowy z dwoma punktami dla głębi.
- 03Radialny reflektor lub vigneta — ciemny do przezroczystego gradientu radialnego na nakładce obrazu.
- 04Wykresy kołowe i pierścienie postępu — gradient stożkowy z twardymi zatrzymaniami.
- 05Podglądy selektora koła barw — pełnospektrowy gradient stożkowy.
- 06Gradienty tekstu — zastosuj gradient do tła, a następnie użyj background-clip: text.
Działa całkowicie w Twojej przeglądarce
Generator gradientów działa w 100% po stronie klienta — żadne dane nie są wysyłane na żaden serwer. Podgląd jest renderowany przez własny silnik CSS przeglądarki, co oznacza, że to, co widzisz, odpowiada temu, co będzie renderować przeglądarka każdego odwiedzającego z tym samym CSS.
Praktyczna uwaga: klienty poczty elektronicznej nadal mają słabą obsługę gradientów CSS. Jeśli wklejasz wygenerowany CSS do szablonu HTML e-maila, dodaj solidny fallback background-color przed deklaracją gradientu, aby odbiorcy na starszych klientach zobaczyli coś rozsądnego.
FAQ generatora gradientów CSS
Jaka jest różnica między gradientami liniowymi, radialnymi i stożkowymi?
Gradienty liniowe przechodzą wzdłuż linii prostej pod danym kątem. Gradienty radialne rozprzestrzeniają się od punktu centralnego — przydatne do podświetleń i efektów punktowych. Gradienty stożkowe obracają się wokół środka, jak wskazówki zegara — idealne do segmentów kołowych i kół barw.
Czy mogę to użyć w projektach Tailwind CSS?
Tak. Skopiuj wygenerowaną wartość i użyj jej jako wartości arbitralnej Tailwind, na przykład: bg-[linear-gradient(135deg,#ff6b6b,#4ecdc4)]. Tailwind będzie ją zawierać w Twoim wyjściowym arkuszu stylów.
Czy podgląd dokładnie odpowiada temu, co zobaczę na żywej stronie?
Tak — podgląd jest renderowany przez ten sam silnik gradientów przeglądarki, który będzie renderować Twój żywy CSS, więc wynik jest pikselowo dokładny.
Czy mogę używać gradientów CSS w szablonach e-maili?
Większość klientów poczty elektronicznej nie obsługuje niezawodnie gradientów CSS. Zawsze dodaj solidny background-color przed deklaracją gradientu jako fallback.
Czy istnieje limit liczby punktów kolorów?
Generator obsługuje do sześciu punktów. Dla większości projektów dwa do czterech wystarczą; więcej niż sześć zwykle zmniejsza przejrzystość zamiast dodawać bogatość.