Ręczne pisanie składni gradientu bywa uciążliwe: kąt, kolejność punktów i pozycje procentowe wzajemnie na siebie wpływają, a jedna literówka po cichu psuje całą deklarację background. To narzędzie utrzymuje podgląd i kod w idealnej zgodności - to, co widzisz, jest dokładnie tym CSS-em, który kopiujesz. Działa całkowicie po stronie przeglądarki, więc nic z tego, co projektujesz, nigdzie nie trafia.
Darmowy Generator Gradientu CSS
Działa w całości w przeglądarce - bez wysyłania plików i bez rejestracji.
Typ
Punkty kolorów
Kod CSS
Czym jest generator gradientu CSS?
To wizualne narzędzie, które tworzy za ciebie kod linear-gradient(), radial-gradient() lub conic-gradient(). Wybierz kolory, przeciągnij punkty zatrzymania, ustaw kąt - podgląd na żywo pokazuje dokładnie to, co narysuje przeglądarka, a gotowy kod CSS wystarczy skopiować i wkleić. Wszystko działa w przeglądarce.
Jak korzystać
- 1Wybierz typ gradientu. Wybierz liniowy, radialny lub stożkowy. Liniowy pokazuje suwak kąta; radialny dodaje kształt (koło lub elipsa) oraz pozycję; stożkowy ma kąt startowy i pozycję.
- 2Ustaw punkty kolorów. Kliknij każdą próbkę, aby wybrać kolor, i przeciągnij jej suwak, żeby przesunąć punkt wzdłuż gradientu. Dodaj do 8 punktów albo usuń je aż do 2.
- 3Dostosuj kierunek. Przeciągnij suwak kąta (0-360 stopni) albo wybierz słowo kluczowe pozycji. Podgląd aktualizuje się na bieżąco po każdej zmianie.
- 4Skopiuj kod CSS. Kliknij Kopiuj, aby pobrać deklarację background wraz z zapasową linią jednolitego koloru, i wklej ją do swojego arkusza stylów.
Dla kogo
- Programiści front-end potrzebujący tła dla hero, karty lub przycisku, którzy chcą od razu mieć gotową linijkę
linear-gradient()bez zapamiętywania składni. - Projektanci web i UI dopasowujący makietę: odtwórz gradient wizualnie, a potem przekaż wygenerowany CSS prosto zespołowi deweloperskiemu.
- Twórcy e-maili i stron docelowych potrzebujący jednolitego koloru zapasowego, żeby projekt wyglądał poprawnie w starszych klientach - wynik zawiera go automatycznie.
- Uczący się CSS, którzy chcą zobaczyć w czasie rzeczywistym, jak kąt, punkty kolorów i typ gradientu zmieniają wynik.
Najczęstsze pytania
Czy ten generator gradientu CSS jest darmowy?
Tak - w stu procentach za darmo, bez rejestracji, bez znaków wodnych, bez limitów. Twórz dowolną liczbę gradientów i kopiuj kod CSS prosto do swojego projektu.
Czy cokolwiek jest wysyłane na serwer?
Nie. Gradient jest tworzony i wyświetlany w podglądzie całkowicie w twojej przeglądarce za pomocą zwykłego JavaScriptu. Żadne kolory, kod ani dane o użyciu nigdzie nie są wysyłane.
Jaka jest różnica między gradientem liniowym, radialnym i stożkowym?
Gradient liniowy przechodzi między kolorami wzdłuż prostej linii pod wybranym kątem. Gradient radialny rozchodzi się od punktu środkowego jako koło lub elipsa. Gradient stożkowy obraca kolory wokół punktu środkowego, jak koło kolorów albo wykres kołowy.
Jak działają punkty kolorów w gradientach CSS?
Każdy punkt łączy kolor z pozycją od 0% do 100% wzdłuż linii gradientu. Przeglądarka płynnie przechodzi między sąsiednimi punktami. Umieszczenie dwóch punktów w tej samej pozycji tworzy ostrą krawędź zamiast przejścia - przydatne przy paskach i efektach wykresu kołowego.
Które przeglądarki obsługują te gradienty?
Wszystkie nowoczesne przeglądarki - Chrome, Firefox, Safari i Edge - obsługują linear-gradient() i radial-gradient() bez prefiksów; conic-gradient() jest obsługiwany wszędzie od 2020 roku. Skopiowany kod zawiera też zapasowy jednolity kolor dla starszych przeglądarek.
Czy mogę użyć wygenerowanego gradientu jako koloru tekstu?
Nie bezpośrednio - gradienty to obrazy, a nie kolory. Zastosuj gradient jako background-image na elemencie z tekstem, a następnie dodaj background-clip: text oraz color: transparent, żeby gradient przebijał przez litery.
Dlaczego mój gradient ma widoczne pasy?
Pasy pojawiają się, gdy dwa odległe punkty przechodzą między sobą przez długi zakres zbliżonych odcieni, ujawniając 8-bitowe kroki koloru. Ogranicz to, dodając pośredni punkt koloru, skracając odległość przejścia albo wybierając kolory różniące się jasnością, a nie tylko odcieniem.