Pomoc

Mesh gradient generator dla CSS i SVG

Wybierz od 2 do 8 kolorów, a ten mesh gradient generator połączy je w miękkie, płynne tło, które kształtujesz, przeciągając punkty koloru. Kopiuj CSS daje kod CSS działający w każdej nowoczesnej przeglądarce, a Pobierz SVG plik 1600 × 1200, który skaluje się do dowolnego rozmiaru. Wszystko działa w twojej przeglądarce, bez WebGL, wysyłania plików i konta.

Mesh gradient krok po kroku

Spójrz na podgląd. Małe okrągłe kropki na nim to punkty koloru, po jednym dla każdej plamy koloru w siatce.
Naciśnij Losuj, aby dostać nową losową paletę i nowy układ. Możesz to robić tak często, jak chcesz, aż coś będzie zbliżone do tego, czego szukasz.
Otwórz wiersz Kolory i kliknij próbkę, aby wybrać własny kolor. Dodaj kolor dodaje kolejne (maksymalnie 8), a mały znak x na próbce usuwa kolor (minimum 2).
Przesuń suwak Złożoność, od 2 do 6, aby zmienić liczbę punktów koloru w siatce.
Przeciągnij kropkę, aby ją przesunąć, myszą lub palcem. Z klawiatury wybierz kropkę i naciskaj klawisze strzałek; przytrzymaj Shift, aby przesuwać o większe kroki.
Gdy podgląd wygląda dobrze, naciśnij Kopiuj CSS lub Pobierz SVG. Krótki komunikat, Skopiowano albo Zapisano, potwierdza operację.

Podgląd odświeża się po każdej zmianie, a pole Kod CSS zawsze pokazuje CSS dokładnie tego, co widzisz. Zmiana złożoności lub naciśnięcie „Losuj” układa punkty od nowa, więc przeciągnięte wcześniej kropki wracają na nowe miejsca.

Co robi złożoność

Złożoność tworzy siatkę złożoność × złożoność punktów koloru, a każdy punkt dostaje jeden kolor z twojej palety. Więcej punktów daje bardziej zróżnicowaną siatkę z mniejszymi plamami, mniej punktów daje szerokie, proste przejścia.

Złożoność 2: 4 punkty, każda plama zajmuje 65% płótna
Złożoność 3: 9 punktów, 43%
Złożoność 4: 16 punktów, 33%
Złożoność 5: 25 punktów, 26%
Złożoność 6: 36 punktów, 22%

Jedna rzecz, na którą warto uważać: kolory są rozdzielane między punkty, więc paleta może mieć więcej kolorów, niż siatka ma punktów. Przy złożoności 2 są tylko 4 punkty, więc paleta z 6 kolorami pokaże naraz najwyżej 4. Zwiększ złożoność, aby pojawiły się pozostałe.

Mesh gradient CSS do wklejenia

Pole Kod CSS zawiera dwie deklaracje: background-color (średnia z twojej palety, żeby żaden róg nie został pusty) oraz background-image, który nakłada jeden radial-gradient() na każdy punkt koloru. To zwykły CSS, bez pliku obrazu i bez skryptu.

Każda warstwa przechodzi od pełnego koloru pośrodku do całkowitej przezroczystości na brzegu, a warstwy nakładają się na siebie, dzięki czemu kolory płynnie się mieszają. Rozmiar i położenie podane są w procentach, więc gradient dopasowuje się do elementu, do którego go zastosujesz.

Mesh gradient SVG do pobrania

Pobierz SVG zapisuje plik gradient-mesh.svg. Ma on viewBox 1600 × 1200, prostokąt bazowy w tym samym średnim kolorze i jeden radialGradient na każdy punkt koloru. Ponieważ to wektor, pozostaje ostry jako tapeta na telefon, tło slajdu czy grafika do posta w mediach społecznościowych. W ramce, która nie ma proporcji 4:3, wypełnia ramkę i przycina brzegi zamiast się rozciągać.

Jeśli potrzebujesz PNG, otwórz SVG w przeglądarce lub edytorze, który czyta SVG, i wyeksportuj go w wybranym rozmiarze.

Gradient mesh online jako tło

Strona internetowa lub sekcja hero: wklej CSS do reguły tego elementu. Tekst na tle gęstej mieszanki kolorów bywa trudny do odczytania, więc sprawdź go w narzędziu Sprawdzian kontrastu kolorów.
Slajdy, tapety i posty: pobierz SVG i umieść go lub wyeksportuj z aplikacji do projektowania.
Dopasowanie do marki: kliknij próbkę i wybierz własny kolor. Narzędzie Pobieranie kolorów ze zdjęcia może wcześniej wyciągnąć kolor ze zdjęcia lub logo.

Oba wyniki to zrzut bieżącego podglądu. Jeśli znów losujesz, skopiuj lub pobierz jeszcze raz, aby dostać nową wersję.

Najczęstsze pytania

Czy jest mesh gradient css generator, który podaje kod CSS?

Tak, ten. Pole „Kod CSS” pokazuje background-color oraz background-image złożony z nałożonych warstw radial-gradient(), po jednej na punkt koloru. To standardowy CSS bez JavaScriptu i pliku obrazu, więc działa w każdej nowoczesnej przeglądarce. Naciśnij „Kopiuj CSS” i wklej go do arkusza stylów lub atrybutu style.

Czy mogę pobrać mesh gradient jako SVG?

Tak. „Pobierz SVG” zapisuje plik z viewBox 1600 × 1200. Jest zbudowany z warstw radialGradient, więc pozostaje ostry w każdym rozmiarze. W ramce, która nie ma proporcji 4:3, wypełnia ramkę i przycina brzegi zamiast się rozciągać.

Jak użyć mesh gradient jako tła strony?

Skopiuj CSS i wklej obie deklaracje do reguły elementu, który chcesz pokolorować, na przykład sekcji hero lub body. Plamy są ustawione w procentach, więc rozciągają się razem z elementem. Sprawdź, czy tekst pozostaje czytelny na wybranych kolorach.

Czy mogę dostać mesh gradient jako PNG?

Nie bezpośrednio: to narzędzie eksportuje CSS i SVG, nie PNG. Otwórz pobrany SVG w przeglądarce lub edytorze, który czyta SVG, i wyeksportuj go albo zrób zrzut ekranu w potrzebnym rozmiarze w pikselach.

Czy mogę animować mesh gradient?

Nie. Narzędzie tworzy jeden nieruchomy gradient: możesz przeciągać punkty i zmieniać kolory, ale wyeksportowany CSS i SVG się nie poruszają.

Czy to jest to samo co siatka gradientowa w Illustratorze?

Nie. Siatka gradientowa w Illustratorze to kratka edytowalnych wektorowych łat. Ten generator łączy nakładające się, miękkie gradienty promieniste, po jednym na punkt koloru. Daje to podobnie gładki, wielokolorowy efekt, ale eksport to zwykły CSS lub SVG.

Czy to jest generator gradientów, który działa online?

Tak, działa w przeglądarce. Wybierasz od 2 do 8 kolorów, przeciągasz punkty i kopiujesz gotowy CSS miękkiego tła. Do prostego przejścia między dwoma kolorami wystarczą inne narzędzia, tutaj powstaje wielokolorowa siatka bez obrazów do hostowania.

Polecane

Inteligentne listwy świetlne Govee
Rzuć to samo miękkie kolorowe światło na ścianę za monitorem.
Drukarka Fujifilm Instax Mini Link 3
Wydrukuj ulubioną siatkę jako kartkę kieszonkową albo pamiątkę z tapety.
Kolorymetr Calibrite Display 123
Upewnij się, że twój gradient wygląda tak samo na każdym ekranie.

Pomaga utrzymać narzędzia za darmo. ✨

Zdjęcia poglądowe. Jestem Partnerem Amazon i otrzymuję wynagrodzenie z tytułu określonych zakupów dokonywanych za moim pośrednictwem.