Przejdź do treści
TextArray
100% lokalnie

Generator gradientów CSS

Generuj liniowe i promieniowe gradienty CSS z niestandardowymi kolorami i kątami.

Wynik

Generator gradientów CSS

Generator gradientów CSS tworzy deklaracje gradientu tła w kilka sekund. Gradienty liniowe przepływają w jednym kierunku i są idealne do subtelnych tła lub przyciągających uwagę przejść. Gradienty promieniowe emanują z punktu centralnego i są doskonałe do efektów reflektora lub gładkich przejść kolorów. Wybierz typ gradientu, ustaw kąt dla gradientów liniowych (0–360 stopni) i wybierz dwa kolory – kody szesnastkowe, RGB, RGBA lub nazwane kolory, wszystko działa. Narzędzie generuje kompletną właściwość CSS background gotową do wklejenia do arkusza stylów.

Gradienty to jeden z najbardziej wszechstronnych elementów projektowania w nowoczesnym CSS. Zmniejszają rozmiar pliku w porównaniu z tłami obrazów, nieskończenie się skalują i bezproblemowo animują się w przeglądarkach. Podgląd na żywo pokazuje dokładnie, jak wyglądaży Twój gradient, gdy dostosowujesz kolory i kąty. Skopiuj dane wyjściowe i zastosuj je do dowolnego elementu – tła strony, przycisku, sekcji bohatera lub nakładki karty.

Wszystko działa w Twojej przeglądarce, więc Twoje wybory kolorów i ustawienia pozostają prywatne. Żadne dane nie są wysyłane nigdzie. Narzędzie działa również w trybie offline, dzięki czemu możesz generować gradienty wszędzie, kiedykolwiek. Niezależnie od tego, czy projektujesz witrynę, tworzysz prototyp aplikacji, czy po prostu eksperymentujesz z kombinacjami kolorów, ten generator przyspieszył Twoją pracę.

Częste pytania

Co to jest gradient CSS?
Gradient CSS to płynne przejście koloru renderowane bezpośrednio przez przeglądarkę. Gradienty liniowe przechodzą wzdłuż linii, gradienty promieniowe emanują z punktu centralnego. Oba są lekkie, skalowalne i można je animować.
Jaki kąt powinienem użyć dla różnych kierunków?
Dla gradientów liniowych: 0° to od lewej do prawej, 90° to od góry do dołu, 180° to od prawej do lewej, 270° to od dołu do góry. Każdy kąt między 0 a 360 stopniami działa. Gradienty promieniowe nie używają kąta.
Czy mogę używać dowolnego formatu kolorów?
Tak. Kody szesnastkowe (#FF0000), RGB (rgb(255, 0, 0)), RGBA z przezroczystością (rgba(255, 0, 0, 0.5)), HSL i nazwane kolory (red, blue) wszystkie działają w gradientach CSS.
Czy moje kolory są wysyłane gdziekolwiek?
Nie. To narzędzie działa całkowicie w Twojej przeglądarce. Twoje kolory, kąty i ustawienia nigdy nie opuszczają Twojego urządzenia.