Generator gradientów
Działa w całości w Twojej przeglądarce. Twoje pliki i dane nigdy nie opuszczają Twojego urządzenia.
O tym narzędziu
Generator gradientów pozwala zbudować gradient CSS na oko, zamiast zgadywać kąty i pozycje punktów. Wybierz liniowy, radialny albo stożkowy, dodawaj lub usuwaj punkty koloru i dostosowuj kolor oraz pozycję każdego z nich, a duży podgląd aktualizuje się od razu.
Czym różnią się te trzy typy gradientu?
Gradient liniowy przechodzi między kolorami wzdłuż prostej linii, a jej kierunek ustawiasz suwakiem kąta: 90 stopni biegnie od lewej do prawej, 180 od góry do dołu. Gradient radialny rozchodzi się od punktu centralnego, tu wybierasz między okręgiem (równomiernie we wszystkich kierunkach) a elipsą (dopasowaną do kształtu pola). Gradient stożkowy owija kolory wokół punktu centralnego jak koło barw albo wykres kołowy i również przyjmuje kąt określający, gdzie zaczyna się przejście. Każdy typ przyjmuje dowolną liczbę punktów koloru, a każdy punkt ma zarówno kolor, jak i pozycję od 0 do 100 procent, więc można zgęścić kilka kolorów blisko siebie albo rozłożyć je równomiernie.
Czy mogę zacząć od gotowego wyglądu zamiast budować od zera?
Tak. Narzędzie zawiera niewielki zestaw gotowych ustawień, jak ciepły dwukolorowy gradient liniowy „Sunset”, radialne przejście „Deep Space” i pełny stożkowy gradient „Rainbow Wheel”. Wybór jednego z nich wczytuje go do edytora, skąd można dalej dostosować kolory, punkty czy kąt zamiast zaczynać od pustego pola. Cokolwiek zbudujesz, wynikowa linia to dokładnie ten CSS, który napisałbyś ręcznie, na przykład linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%), gotowy do wklejenia w arkuszu stylów.
Czy to, co projektuję, jest gdzieś przesyłane?
Nie. Budowanie i podgląd gradientu odbywają się w całości w przeglądarce, więc nic z tego, co projektujesz, nie opuszcza twojego urządzenia. Dzięki temu można spokojnie prototypować gradient marki klienta albo tło wewnętrznego produktu, zanim cokolwiek trafi na żywą stronę.
Użyj go, żeby uzyskać linię background: linear-gradient(...) dla sekcji powitalnej, radialną poświatę za kartą albo gradient stożkowy dla pierścienia postępu czy koła barw. Zobacz dokumentację gradientów MDN, żeby poznać pełną składnię linear-gradient(), radial-gradient() i conic-gradient().