Generator gradientów siatkowych (mesh)

Twórz gradienty siatkowe z przeciąganymi punktami kolorów

Gradienty siatkowe (mesh) łączą wiele kolorów na powierzchni w miękkich, organicznych przejściach. Stały się stałym elementem teł sekcji hero, ekranów powitalnych aplikacji i okładek muzycznych, ponieważ wyglądają bogaciej niż prosty dwukolorowy gradient liniowy. Ten generator gradientów siatkowych pozwala umieścić od trzech do sześciu kolorowych punktów bezpośrednio na obszarze roboczym, przeciągnąć je na miejsce i od razu zobaczyć zaktualizowane przejście.

Jak to działa w czystym CSS

Przeglądarki nie obsługują prawdziwych gradientów siatkowych, ale można je przybliżyć, nakładając kilka warstw tła radial-gradient(). Każda warstwa jest wyśrodkowana na jednym z Twoich punktów i przechodzi od koloru punktu do całkowicie przezroczystej wersji tego samego koloru, a wszystkie warstwy leżą na bazowym background-color. Nakładające się przejścia płynnie mieszają kolory, co daje efekt siatki. Wygenerowany CSS to jedna deklaracja bez obrazów, więc ładuje się natychmiast i skaluje do dowolnego rozmiaru elementu.

Przejście do rgba() z zerową wartością alfa zamiast słowa kluczowego transparent pozwala uniknąć szarych obwódek, które mogą pojawiać się w niektórych silnikach renderujących, a także umożliwia dokładne odtworzenie tego samego gradientu na elemencie canvas HTML na potrzeby eksportu PNG.

Rozmycie, szum i palety

Suwak rozmycia dodaje CSS filter: blur() dla jeszcze bardziej miękkiego wyglądu, a suwak szumu nakłada teksturę SVG z szumem fraktalnym, która dodaje subtelne ziarno i ogranicza pasmowanie kolorów na dużych powierzchniach. Przycisk Losowa paleta wybiera harmonijny zestaw odcieni o zrównoważonym nasyceniu i jasności, a Losowy układ dodatkowo przestawia punkty. Gdy wynik Ci odpowiada, skopiuj CSS do arkusza stylów lub pobierz PNG o wymiarach 1600 na 900 pikseli. Wszystko jest generowane lokalnie w Twojej przeglądarce i nic nie jest przesyłane.