Generator gradientu mesh: przeciągaj punkty koloru, kopiuj CSS | We.Inc
Przeciągaj punkty koloru po płótnie, by stworzyć miękki gradient mesh, a potem skopiuj czysty CSS z nałożonych gradientów radialnych lub pobierz PNG. Za darmo, w Twojej przeglądarce.
Generator gradientu mesh
Gradient mesh łączy kilka punktów koloru na całej powierzchni, zamiast biec wzdłuż jednej linii. W sieci możesz go odtworzyć zwykłym CSS, nakładając jeden radial-gradient na każdy punkt nad kolorem bazowym. Przeciągnij punkty poniżej, ustaw kolor i zasięg każdego z nich, a potem skopiuj CSS lub zapisz PNG.
Które narzędzie do gradientów pasuje do zadania
Chcesz
Użyj
Wynik
Nieruchome, miękkie tło z plamami bez skryptu
Tego generatora mesh
CSS lub PNG
Powoli poruszające się tło
Generatora gradientów shader
Komponent WebGL
Liniowe, radialne lub stożkowe przejście z dwoma do pięciu punktami
Generatora gradientów CSS
Jedna linia gradientu
Każdy punkt staje się tu osobnym gradientem radialnym, malowanym na kolorze bazowym. Ponieważ wynik to zwykły CSS, nie wymaga pobierania, nie potrzebuje JavaScript na Twojej stronie i skaluje się do dowolnego rozmiaru bez rozmycia.
Wybierz preset lub zostaw domyślny, a potem przeciągnij dowolny numerowany uchwyt na płótnie, aby przesunąć ten kolor.
Użytkownicy klawiatury mogą ustawić fokus na uchwycie i przesuwać go klawiszami strzałek albo wpisać dokładne wartości X i Y na liście punktów.
Zmień kolor punktu i jego zasięg. Zasięg to miejsce, w którym kolor staje się całkowicie przezroczysty, mierzone jako część odległości od punktu do najdalszego rogu pola.
Dodaj do ośmiu punktów lub usuń nadmiarowe, a potem skopiuj CSS lub pobierz płótno jako PNG w wybranym rozmiarze.
Trzy do pięciu punktów zwykle wygląda bogaciej niż osiem. Więcej warstw najczęściej zamienia środek w błoto.
Ustaw kolor bazowy blisko najjaśniejszego punktu, aby uzyskać pastelowy wygląd, albo bardzo ciemny, aby uzyskać świecący nocny styl.
Umieszczaj tekst nagłówka nad najspokojniejszym obszarem i sprawdź jego kontrast w najjaśniejszych i najciemniejszych miejscach, które zakrywa.
PNG przydaje się w e-mailach i grafikach do mediów społecznościowych, gdzie tło CSS nie pojedzie razem z projektem.
Najczęściej zadawane pytania
Czy to prawdziwy gradient mesh?
Aplikacje projektowe, takie jak edytory wektorowe, budują prawdziwe siatki z rastra płatów. CSS nie ma funkcji mesh, więc to narzędzie nakłada gradienty radialne, co daje ten sam miękki, wielobarwny efekt w tłach i sekcjach hero.
Czym to się różni od generatora gradientów shader?
Narzędzie shader rysuje animowany gradient za pomocą WebGL i eksportuje komponent uruchamiający skrypt. To narzędzie tworzy nieruchomy obraz wyłącznie z CSS, więc renderuje się natychmiast, drukuje się i działa tam, gdzie skrypty są zablokowane.
Dlaczego każdy kolor przechodzi w swoją przezroczystą wersję?
Przejście do słowa kluczowego transparent może w niektórych trybach interpolacji zabarwić krawędź na szaro. Zakończenie każdej warstwy tymi samymi wartościami czerwonego, zielonego i niebieskiego z zerową alfą utrzymuje czystą krawędź.
Czy mogę użyć tego CSS w Tailwind?
Tak. Umieść deklaracje w klasie w swoim arkuszu stylów albo wklej wartość background-image do dowolnej właściwości, na przykład [background-image:...], jeśli wolisz trzymać ją w kodzie elementu.
Czy PNG dokładnie odpowiada CSS?
Bardzo blisko. Plik do pobrania jest rysowany na canvasie z tymi samymi punktami, kolorami i zasięgiem, ale przeglądarki mogą wygładzać gradienty na canvasie nieco inaczej niż te w CSS.
Jak nałożone gradienty radialne tworzą mesh
background-image przyjmuje listę rozdzieloną przecinkami, a pierwsza wymieniona warstwa jest malowana na wierzchu. Każda warstwa to tutaj koło wyśrodkowane na jednym punkcie, pełne w środku i przezroczyste na granicy zasięgu, więc sąsiednie kolory nachodzą na siebie i się mieszają.
Nie podano słowa kluczowego rozmiaru, więc każde koło używa domyślnego rozmiaru farthest-corner, a procenty punktów skalują się z polem. Punkt blisko środka rozchodzi się więc mniej niż punkt w rogu o tym samym zasięgu, a szeroki baner powiększa każde koło, dlatego oglądaj podgląd w proporcjach, których naprawdę użyjesz.
Jak uzyskać dobry wygląd
Wybieraj kolory leżące blisko siebie na kole barw, aby uzyskać spokojny efekt, i dodaj jeden kontrastowy punkt dla energii. Wysuń punkty częściowo poza krawędź, aby zasugerować, że kolor ciągnie się poza kadrem.
Jeśli na dużych, ciemnych gradientach widzisz pasy, dodaj delikatną teksturę szumu jako dodatkową warstwę albo trochę rozjaśnij kolor bazowy.
CSS stojący za gradientem mesh
To preset Port zapisany ręcznie. Edytuj dowolną wartość, a wynik zaktualizuje się w ramce.
Cztery punkty na jasnym tle
Każdy radial-gradient to jeden punkt koloru. Warstwy wymienione wcześniej leżą na tych wymienionych po nich.
Co kontroluje każde ustawienie
Ustawienia i CSS, który generują
Ustawienie
Część CSS
Efekt
Pozycja punktu
circle at X% Y%
Gdzie kolor jest najsilniejszy
Kolor punktu
pierwszy punkt koloru
Barwa malowana w tym miejscu
Zasięg
drugi punkt, np. 55%
Część odległości do najdalszego rogu, w której kolor staje się całkowicie przezroczysty
Kolor bazowy
Co widać tam, gdzie nie sięga żaden punkt
Kolejność punktów
kolejność warstw
Wcześniejsze punkty zakrywają późniejsze tam, gdzie się nakładają
Port
Morela
Nocna zmiana
Łąka
Edytor gradientu mesh
Przeciągaj numerowane punkty koloru na płótnie, ustaw kolor i zasięg każdego z nich, a potem skopiuj CSS lub pobierz PNG. Presety: Port, Morela, Nocna zmiana, Łąka.
Presety
Punkt {n} w {x}% {y}%. Przesuwaj klawiszami strzałek.