Generator gradientów CSS
Prywatne z założenia — działa w całości w Państwa przeglądarce
Buduj liniowe i radialne gradienty CSS wizualnie, w przeglądarce. Toova pozwala umieszczać punkty kolorów, dostrajać kąty, przełączać typy i eksportować gotowy do wklejenia CSS — wszystko bez przesyłania czegokolwiek na serwer.
Gradienty liniowe, radialne i stożkowe
Gradienty liniowe poruszają się wzdłuż prostej osi zdefiniowanej kątem lub słowem kluczowym kierunku. Gradienty radialne rozszerzają się z punktu centralnego. Gradienty stożkowe omiatają wokół kąta — idealne dla teł w stylu wykresu kołowego lub efektów koła kolorów. Toova udostępnia wszystkie trzy z kontrolkami wizualnymi, więc można zbudować pożądany gradient bez zapamiętywania każdego wariantu składni CSS.
Punkty kolorów i easing
Przeciągaj punkty kolorów wzdłuż paska gradientu, aby kontrolować, gdzie zaczyna się i kończy każdy kolor. Dodaj tyle punktów, ile potrzebujesz — Toova nie ogranicza. Użyj ustawień easing, aby wprowadzić nieliniową interpolację, co unika błotnistego szarego środka, który nęka proste dwukolorowe gradienty. Wynikowy CSS używa standardowych właściwości wspieranych w każdej nowoczesnej przeglądarce.
Generowanie tylko w przeglądarce
Każdy gradient jest generowany lokalnie w przeglądarce. Wybrane kolory, umieszczone punkty, wynikowy CSS — nic z tego nie opuszcza strony. To przesada dla gradientów, ale oznacza, że narzędzie jest szybkie i niezawodne, a strona działa offline po pierwszym załadowaniu. Zakładka Network pozostanie pusta podczas użycia.
Najczęściej zadawane pytania
- Kiedy używać gradientu stożkowego?
- Gradienty stożkowe są idealne dla efektów wykresu kołowego, kół kolorów i abstrakcyjnych wirujących teł. Omiatają wokół punktu centralnego, czego nie potrafi ani gradient liniowy, ani radialny. Wsparcie przeglądarek jest teraz solidne w nowoczesnych silnikach.
- Jak uniknąć błotnistego środka w dwukolorowych gradientach?
- Dodaj pośredni punkt o percepcyjnie zrównoważonym kolorze lub wybierz kolory o podobnej jasności. Mieszanie kolorów dopełniających przez ich środek RGB tworzy szarość — ręczne wybranie środka w OKLCH unika tego.
- Czy mogę eksportować do innych formatów?
- Wynikiem jest standardowy CSS, który działa bezpośrednio w dowolnym kontekście webowym. Dla narzędzi projektowych skopiuj poszczególne punkty kolorów i odtwórz gradient w Figma lub Sketch.
- Czy wspiera przezroczystość?
- Tak. Każdy punkt koloru może mieć kanał alfa. Przydatne do wygaszania krawędzi w tło lub nakładania gradientów z półprzezroczystymi punktami.
- Czy moje dane są wysyłane gdziekolwiek?
- Nie. Generowanie działa całkowicie w przeglądarce.