Kreator gradientów

Percepcyjnie jednolite gradienty OKLCH, bez szarych pasm, eksport CSS jednym kliknięciem.

Profil →Pozycja0%

Profil →Pozycja100%

Kąt90°Gładka interpolacja (brak martwej strefy)

Biblioteka gradientów

48 klasycznych kombinacji społeczności — kliknij aby zastosować punkty, typ i kąt w jednym kroku.

Zachód słońca

Ocean

Las

Cukierek

Zmierzch

Stonowane

Kod CSS

background: linear-gradient(90deg, #1D3557 0%, 463C7B 25%, 7B3C8A 50%, B4387B 75%, #E63946 100%);

Jak działa narzędzie gradientu – buduj punkty, dostrajaj, kopiuj CSS.

2–6 punktów z dowolnym umiejscowieniem, interpolacja OKLCH bez niejednorodnych pasm, plus 48 starannie dobranych presetów.

01
Buduj punkty
2–6 punktów: wybierz każdy kolor, przeciągnij pozycje lub wklej wartości HEX.
02
Dostrajaj
Przełączaj między liniowym/radialnym/stożkowym, przeciągnij kąt – lub zastosuj starannie dobrany preset jednym kliknięciem.
03
Kopiuj
Tryb gładki automatycznie rozszerza punkty pośrednie OKLCH; CSS jest gotowe do wklejenia, a link przenosi Twój gradient.

FAQ dotyczące gradientów

Często zadawane pytania użytkowników.

Dlaczego gradienty stają się szare w środku?: Interpolacja RGB przecina terytorium o niskiej nasyceniu. Interpolacja OKLCH podąża za odcieniem, więc środek pozostaje czysty.
Czy mogę dodać więcej przystanków?: Tak – od 2 do 6 przystanków, każdy z własnym kolorem i pozycją. Tryb gładki wstawia punkty pośrednie OKLCH między sąsiadami, więc cała ramp pozostaje czysta.
Które przeglądarki obsługują eksportowany CSS?: Wszystkie nowoczesne przeglądarki. Narzędzie generuje zwykłe przystanki RGB, więc nie jest potrzebna konwersja nawet dla starszych silników.
Jak udostępnić gradient?: Każda modyfikacja synchronizuje się z adresem strony (#g=...). Wyślij link z paska adresu do współpracownika, a otworzy się dokładnie tak, jak go dostosowałeś.

Po otrzymaniu wyniku

Kontynuuj stąd i wykorzystaj kolory w praktyce.

Generator odcieni

Dowolny kolor na skalę systemu projektowego z 11 krokami, perceptualnie równomierną w OKLCH, kontrast WCAG na każdym kroku, eksport do Tailwind/CSS/SCSS/JSON.

Konwerter kolorów

Wpisz dowolny format (HEX / RGB / HSL / nazwa) i konwertuj na wszystkie przestrzenie kolorów w czasie rzeczywistym.

Tablica palet

Spacja do losowania, blokowanie, przeciąganie do zmiany kolejności, udostępnianie przez URL — wszystko, co powinna robić tablica palet.

Kontroler kontrastu

Walidacja kontrastu WCAG 2.1 między dowolnym kolorem pierwszoplanowym a tła.

Jak działa narzędzie gradientu – buduj punkty, dostrajaj, kopiuj CSS.

2–6 punktów z dowolnym umiejscowieniem, interpolacja OKLCH bez niejednorodnych pasm, plus 48 starannie dobranych presetów.

Buduj punkty

2–6 punktów: wybierz każdy kolor, przeciągnij pozycje lub wklej wartości HEX.

Dostrajaj

Przełączaj między liniowym/radialnym/stożkowym, przeciągnij kąt – lub zastosuj starannie dobrany preset jednym kliknięciem.

Kopiuj

Tryb gładki automatycznie rozszerza punkty pośrednie OKLCH; CSS jest gotowe do wklejenia, a link przenosi Twój gradient.

FAQ dotyczące gradientów

Często zadawane pytania użytkowników.

Dlaczego gradienty stają się szare w środku?

Interpolacja RGB przecina terytorium o niskiej nasyceniu. Interpolacja OKLCH podąża za odcieniem, więc środek pozostaje czysty.

Czy mogę dodać więcej przystanków?

Tak – od 2 do 6 przystanków, każdy z własnym kolorem i pozycją. Tryb gładki wstawia punkty pośrednie OKLCH między sąsiadami, więc cała ramp pozostaje czysta.

Które przeglądarki obsługują eksportowany CSS?

Wszystkie nowoczesne przeglądarki. Narzędzie generuje zwykłe przystanki RGB, więc nie jest potrzebna konwersja nawet dla starszych silników.

Jak udostępnić gradient?

Każda modyfikacja synchronizuje się z adresem strony (#g=...). Wyślij link z paska adresu do współpracownika, a otworzy się dokładnie tak, jak go dostosowałeś.