Generator Gradientów CSS
Czym jest Generator Gradientów CSS
Generator gradientów CSS pozwala wizualnie zbudować gradient liniowy lub radialny i skopiować dokładny kod CSS. Wybierz typ gradientu, ustaw kąt (liniowy) lub kształt i pozycję (radialny), dodaj tyle punktów koloru, ile potrzebujesz, i przeciągnij każdy z nich w odpowiednie miejsce. Podgląd aktualizuje się natychmiast, a pole wyjściowe zawsze pokazuje gotową do wklejenia deklarację background.
Jak używać
- Wybierz Liniowy lub Radialny jako typ gradientu.
- Dostosuj suwak kąta dla gradientów liniowych lub wybierz kształt i pozycję dla radialnych.
- Ustaw kolor i pozycję każdego punktu, a kolejne dodaj przyciskiem Dodaj punkt koloru.
- Skopiuj wygenerowany CSS z pola wyjściowego i wklej go do swojego arkusza stylów.
Kiedy używać
Budujesz sekcję hero i potrzebujesz płynnego tła od niebieskiego do różowego? Ustaw dwa punkty na 0% i 100%, wybierz kąt i skopiuj background: linear-gradient(90deg, #3B82F6 0%, #EC4899 100%); prosto do swojego CSS. Równie przydatne do nakładek na karty, stanów hover przycisków czy radialnej poświaty za logo, bez ręcznego dopracowywania składni gradientu w devtools.
Często zadawane pytania
Jaka jest różnica między gradientem liniowym a radialnym?
Gradient liniowy przechodzi między kolorami wzdłuż prostej linii pod stałym kątem, jak zachód słońca przechodzący z pomarańczy w fiolet. Gradient radialny przechodzi między kolorami na zewnątrz od punktu centralnego w kształcie koła lub elipsy, jak reflektor lub efekt poświaty.
Ile punktów koloru mogę dodać?
Tyle, ile chcesz. Każdy gradient potrzebuje co najmniej dwóch punktów, żeby się wyrenderować, a kolejne możesz dodać przyciskiem Dodaj punkt koloru, tworząc wielokolorowe przejścia, jak tęcze czy palety marki.
Co oznacza procent pozycji przy każdym punkcie?
Pozycja wskazuje, gdzie dany kolor osiąga pełną intensywność wzdłuż gradientu, od 0% (początek) do 100% (koniec). Przesunięcie pozycji punktu zmienia, gdzie jego kolor dominuje i jak miesza się z sąsiednimi.
Czy wygenerowany CSS działa we wszystkich przeglądarkach?
Tak. linear-gradient() i radial-gradient() to standardowe funkcje CSS obsługiwane przez każdą nowoczesną przeglądarkę, bez potrzeby prefiksów producenta.
Czy mogę udostępnić to narzędzie z gotowym gradientem?
Tak. Adres URL aktualizuje się automatycznie podczas tworzenia gradientu. Skopiuj link z paska adresu lub użyj przycisku Udostępnij, a każdy, kto go otworzy, zobaczy dokładnie ten sam gradient.
Powiązane narzędzia
Kalkulator Proporcji Obrazu
Oblicz proporcje obrazu, znajdź brakującą szerokość lub wysokość i zmieniaj rozmiar zdjęć oraz filmów bez utraty proporcji. Za darmo.
Generator Kodu Kreskowego
Generuj kody kreskowe EAN-13 lub Code 128 online. Wpisz numer lub tekst i pobierz jako SVG lub PNG. Bezpłatnie, bez rejestracji.
Dekoder Base64
Dekoduj ciągi Base64 do zwykłego tekstu błyskawicznie w przeglądarce. Obsługuje pełne kodowanie Unicode z emoji. Darmowy dekoder Base64.