Opis
To narzędzie zamienia dobór kolorów w gotowy gradient CSS bez ręcznego zgadywania wartości. Przełączaj tryb liniowy i radialny, reguluj kąt albo punkt skupienia i od razu widzisz, jak zmienia się kompozycja. Przydaje się wszędzie tam, gdzie tło ma wspierać układ: w sekcjach hero, na przyciskach, kartach, overlayach, badge’ach i panelach. Wynik to czysty CSS, który łatwo wkleisz do arkusza stylów, komponentu albo tokenów projektu.
Zastosowania
- Tło sekcji heroStwórz mocny gradient na górę strony, który podkreśla nagłówek i kolory marki.
- Styl przycisku CTAWygeneruj dwukolorowy gradient dla przycisków akcji i elementów interaktywnych.
- Poświata pod kartąDodaj miękki radialny blask pod kartą z ceną, kafelkiem funkcji lub panelem produktu.
- Porównanie palety markiSprawdź kilka zestawień kolorów przed dodaniem ich do systemu UI lub arkusza stylów.
- Overlay na zdjęcieZbuduj nakładkę gradientową, która poprawia czytelność tekstu na banerach i grafikach.
Jak to dziala
- 1
Wybierz kolory gradientu.
- 2
Ustaw tryb liniowy lub radialny.
- 3
Dopasuj kąt, pozycję albo rozpiętość.
- 4
Sprawdź podgląd na żywo.
- 5
Skopiuj kod CSS do projektu.
Przyklady
Ukosny gradient marki
Wejscie: #0f172a → #2563eb przy 135°
Wynik: background: linear-gradient(135deg, #0f172a, #2563eb);
Wyrazisty gradient przechodzący z ciemnego w jasny ton.
Miękka poświata radialna
Wejscie: #fff7ed → #fdba74 na środku
Wynik: background: radial-gradient(circle at center, #fff7ed 0%, #fdba74 100%);
Ciepłe rozświetlenie do kart i paneli.
Nagłówek z trzema kolorami
Wejscie: #111827 → #4f46e5 → #c084fc
Wynik: background: linear-gradient(120deg, #111827 0%, #4f46e5 52%, #c084fc 100%);
Bogatszy układ kolorów do sekcji otwierających stronę.
FAQ
Czy mogę ustawić miejsce początku gradientu?
Tak. W gradiencie liniowym ustawiasz kąt, a w radialnym także punkt środka i obszar rozchodzenia się światła.
Dlaczego podgląd może wyglądać inaczej niż w projekcie?
Na odbiór wpływa wielkość elementu, kolor tła pod spodem i sposób renderowania gradientu przez przeglądarkę.
Ile punktów koloru warto użyć?
Dwa punkty wystarczą do prostych sekcji, a trzy lub więcej dadzą bogatsze przejścia. Zbyt wiele stopni może jednak wprowadzić chaos.
Czy mogę wkleić wynik do zwykłego CSS i stylów komponentu?
Tak. Otrzymany zapis można wkleić do arkusza stylów, bloku style albo definicji komponentu.