Generator gradientów

Narzędzie Generator gradientów przydaje się projektantom i programistom front-end, gdy chcą dopracować interfejs przed wdrożeniem. Utwórz liniowy gradient CSS.

Utwórz liniowy gradient CSS. Możesz użyć go bezpłatnie w przeglądarce bez konta, a potem sprawdzić wynik przed kolejnym krokiem.

Jak używać

Najpierw podaj kąt gradientu w stopniach; decyduje on o tym, w którą stronę kolory przechodzą przez element.
Dodaj kolor początkowy w następnym wierszu, a kolor końcowy poniżej.
Wygeneruj gradient: obszar wyników pokaże wiersz CSS, który możesz skopiować bezpośrednio do swojego projektu.
Wklej ten wiersz do reguły, nad którą pracujesz, a następnie odśwież stronę, aby zobaczyć, jak naprawdę wygląda.
Zmieniaj kąt lub kolor i generuj ponownie tak często, jak chcesz, zanim wybierzesz ostateczny styl.

Przykład

W przykładzie użyto kąta 45 stopni, z bardzo ciemnym niebieskim na początku i intensywną zielenią na końcu. Po wygenerowaniu porównaj otrzymany wiersz z tym, co miałeś na myśli: kąt ustawia kierunek, a kolejność kolorów decyduje o odcieniu na każdym końcu.

Dane wejściowe

45
#0F172A
#16A34A

Wynik

background: linear-gradient(45deg, #0F172A, #16A34A);

Ograniczenia i formaty

Tworzone są tylko gradienty liniowe; warianty promieniste, stożkowe i powtarzane wymagają innej składni.
Dwa kolory dają proste przejście, ale pośrednich punktów nie można dostosować z tej strony.
Wynik zależy od ekranu i przeglądarki odwiedzającego, a bardzo kontrastowe przejście może męczyć wzrok, gdy na wierzchu znajduje się tekst.
Sprawdź kontrast, jeśli umieszczasz tekst na gradiencie, ponieważ czytelności nie da się ocenić tylko na podstawie kodu.

Gdzie odbywa się przetwarzanie

Gradient jest generowany w Twojej przeglądarce. Kąt i oba kolory pozostają na Twoim urządzeniu, nic nie jest przesyłane i nic nie jest zachowywane po opuszczeniu strony, więc fragment, który kopiujesz, powstaje w całości na Twoim komputerze.

Częste pytania

Czy mogę ponownie użyć wygenerowanego kodu w innej regule?

Tak. Ten wiersz jest zgodny ze standardową składnią gradientu liniowego i pasuje do dowolnej deklaracji tła. Skopiuj go bez zmian i zmień tylko kolory, jeśli Twoja paleta później się zmieni.

Jak uzyskać gradient biegnący z góry na dół?

Zmieniaj kąt małymi krokami i zatrzymaj wartość, przy której pierwszy kolor znajdzie się na górze elementu. Ponieważ wynik sprawdza się przez odświeżenie strony, zwykle wystarczą jedna lub dwie próby, aby trafić w pożądany kierunek.

Czy mogę użyć więcej niż dwóch kolorów?

Ta strona wychodzi od koloru początkowego i końcowego, więc przejścia trójkolorowego nie da się tu ustawić bezpośrednio. Nadal możesz wygenerować pierwszą parę, a następnie dodać dodatkowe punkty ręcznie we własnym arkuszu stylów.