Generator gradientów siatkowych

Twórz płynne gradienty siatkowe (mesh gradients) CSS. Kopiuj kod CSS/SVG. Trendy design 2024. Bezpłatnie.

Bezpieczne (SSL)

Przetwarzanie Lokalne

100% Darmowe

Przejdź do narzędzia

Instrukcja

1

Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku.
2

Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce.
3

Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.

                                                function runTool() {

                                                  return "Wynik gotowy w 0.1s";

                                                }

🎨 6 punktów 🌫️ Miękkość: 72% 🔀 Blend: soft-light 🎲 Seed: 24680

Kolor bazowy

Paleta kolorów (HEX, rozdzielone przecinkami)

Liczba punktów 6

Miękkość 72%

Seed (ziarno) 24680

Wysokość podglądu 320px

Tryb mieszania

Warstw gradientu

Liczba plam

Miękkość

72 %

promień zaniku plamy w przezroczystość

Kolory w palecie

5 szt.

unikalne #RRGGBB; przy mniej niż 2 silnik wchodzi w paletę awaryjną

Tryb mieszania

Miękkie światło

Ziarno (seed)

24680

Rozmiar CSS

658 B

długość kodu do wklejenia w arkusz stylów

Wynikowy kod CSS

/* Mesh Gradients Generator */
.mesh-bg {
  background-color: #0B1020;
  background-image:
    radial-gradient(circle at 43% 43%, rgba(255, 107, 107, 0.77) 0%, rgba(0,0,0,0) 72%),
    radial-gradient(circle at 85% 67%, rgba(77, 150, 255, 0.78) 0%, rgba(0,0,0,0) 72%),
    radial-gradient(circle at 61% 46%, rgba(107, 203, 119, 0.6) 0%, rgba(0,0,0,0) 72%),
    radial-gradient(circle at 22% 31%, rgba(255, 217, 61, 0.72) 0%, rgba(0,0,0,0) 72%),
    radial-gradient(circle at 8% 65%, rgba(157, 78, 221, 0.57) 0%, rgba(0,0,0,0) 72%),
    radial-gradient(circle at 16% 40%, rgba(255, 107, 107, 0.73) 0%, rgba(0,0,0,0) 72%);
  background-blend-mode: soft-light;
}

Ściąga: składnia CSS generowana przez narzędzie — dokładnie według kodu

Efekt to N warstw radial-gradient na jednym background-image (nie filtr blur ani canvas); pozycje, alfa i kolejność kolorów losowane deterministycznie z seeda
Element	Jak jest budowany
Warstwa (plama)	radial-gradient(circle at X% Y%, rgba(R, G, B, A) 0%, rgba(0,0,0,0) M%) — środek plamy w X z zakresu 8–92% i Y z 10–90%, alfa A losowana z 0,55–0,95
Łączenie warstw	plamy (2–10, suwak „Liczba punktów”) sklejane przecinkami w background-image; kolejność listy = kolejność rysowania, wyższa warstwa zakrywa dolną
Kolor bazowy	background-color z pola „Kolor bazowy” (#RRGGBB) — prześwituje przez przezroczyste końcówki plam rgba(0,0,0,0)
Promień zaniku (miękkość)	M z suwaka „Miękkość” (35–85%) = miejsce, w którym plama przechodzi w pełną przezroczystość; mniejsza wartość = ostrzejsze krawędzie, większa = bardziej rozmyte
Mieszanie	background-blend-mode z listy: normal, screen, overlay, soft-light, hard-light, multiply — tryb łączy plamy między sobą i z kolorem bazowym
Kolory	paleta przyjmuje wyłącznie pełne, unikalne zapisy #RRGGBB (spacje i przecinki jako separatory); mniej niż 2 poprawne kolory → awaryjnie #FF6B6B, #4D96FF, #6BCB77; plama nr i bierze kolor paleta[i mod liczba kolorów]
Seed (ziarno)	pozycje i alfa wyliczane z sha256(seed:i:j) — ten sam seed daje identyczny gradient w każdej przeglądarce; „Losuj” podmienia tylko seed z zakresu 1–999999

Warto wiedzieć — gradienty siatkowe w praktyce

Mesh a wydajność

Efekt zbudowany jest z kilku warstw radial-gradient na jednym tle — przeglądarka liczy je raz przy renderowaniu, bez dalszych kosztów. Droższy jest filtr blur (wymusza przejścia na GPU i prze-renderowanie), dlatego tu nie występuje: rozmycie robi sama geometria gradientu. Przy 10 plamach i trybie hard-light na słabszych urządzeniach i tak testuj na realnym sprzęcie.

Deterministyczny seed

Pozycje plam i przezroczystość wylicza sha256 z trójki seed:i:j — ten sam seed zawsze da identyczny obraz, niezależnie od przeglądarki. Podaj seed w opisie designu albo w komentarzu CSS, a klient odbuduje dokładnie ten sam gradient latami później. „Losuj” zmienia wyłącznie ziarno.

Kolor bazowy prześwituje

Plamy mają alfa 0,55–0,95 i kończą się pełną przezroczystością, więc pod spodem zawsze widać kolor bazowy — to on spina całość w spójną siatkę. Ciemny granat (#0B1020) daje głębię, jaśniejsze tła rozjaśniają miksy; tryb mieszania dodatkowo zmienia charakter przejść.

Gdzie się sprawdza

Mesh background pasuje do sekcji hero, kart CTA, nagłówków i miejsc, gdzie zdjęcie byłoby zbyt głośne. Kod wklej jako klasę .mesh-bg (CSS jest gotowy do podpięcia), a wysokość podglądu dobierz do docelowego kontenera — gradient skaluje się bezstratnie na każdej rozdzielczości.

Oceń to narzędzie:

Powiązane narzędzia

Inne narzędzia, które mogą Ci się przydać

Generator mesh gradient – gradienty siatkowe w CSS i SVG

Mesh gradient (gradient siatkowy) to płynne przejście kolorów w wielu kierunkach naraz – w przeciwieństwie do liniowego czy kołowego gradientu. Efekt, popularny w nowoczesnym designie (Apple, Spotify, Material You), można osiągnąć przez layered radial gradients w CSS lub SVG feMerge.

mesh gradient CSS generator gradientów siatkowych gradient siatkowy CSS płynny gradient tło

Czym jest mesh gradient

Mesh gradient: kilka radialnych gradientów nałożonych na siebie z różnymi kolorami i pozycjami. Efekt: płynne, organiczne przejście kolorów. CSS technika: wielokrotny background z radial-gradient i mix-blend-mode. Przykład: background: radial-gradient(ellipse at 20% 30%, #ff6b6b, transparent), radial-gradient(ellipse at 80% 70%, #4ecdc4, transparent). Narzędzia: gradienty.app, cssgradient.io.

CSS gradients – typy

linear-gradient: proste przejście w kierunku. radial-gradient: od środka na zewnątrz. conic-gradient: kołowe (jak tarcza zegara). Mesh: wielokrotne radial-gradient. Layering: background: grad1, grad2, grad3 (oddzielone przecinkami). Repeat: repeating-linear-gradient. Animacja: background-size + @keyframes lub CSS Houdini. SVG: feGaussianBlur + feMerge dla miękkiego efektu.

Trendy 2024 – gradienty w designie

Aurora/Northern Lights: fiolet, niebieski, zielony, miękkie przejścia. Blobby gradients: organiczne kształty z blur. Grainy gradients: gradient + noise texture (SVG feTurbulence). Glass morphism: rozmyte gradient tło + frosted glass. Dark gradients: ciemne tła z neonowymi akcentami. Duotone: dwa kolory z blend mode. Material You (Google): dynamiczne gradienty z koloru tapety.

SVG mesh gradient – zaawansowany

SVG feMesh nie istnieje natively. Workaround: SVG z wieloma kółkami (circle) z blur (feGaussianBlur). Alternatywnie: SVG linearGradient/radialGradient na mesh. Narzędzie Figma: mesh gradients plugin. CSS Houdini (Paint API): własny painter dla mesh gradients. Three.js/WebGL: prawdziwe mesh gradients z interpolacją Bilinear.

Jak działa generator gradientów siatkowych – mechanizm warstw

Gradient siatkowy nie jest jedną funkcją CSS. To kompozycja kilku warstw tła, z których każda jest osobnym radial-gradient. Przeglądarka maluje je w kolejności odwrotnej do zapisu: warstwa wpisana jako pierwsza w background leży na wierzchu, a każda następna trafia pod nią. Kolor w danym punkcie nie powstaje więc z interpolacji dwóch barw, ale ze złożenia (kompozycji alfa) wszystkich warstw w tym punkcie.

O wyglądzie decydują trzy parametry każdej plamy: środek, czyli para procentów opisująca pozycję względem szerokości i wysokości elementu, promienie elipsy oraz lista stopów. Stop to punkt na promieniu, w którym kolor ma określoną wartość – od pełnego koloru na początku do transparent na końcu. Im dalej odsuniesz przezroczysty stop, tym szersza i bardziej rozmyta jest plama. Kolor spodu widać wszędzie tam, gdzie żadna plama nie jest już widoczna.

Drugi mechanizm to mieszanie. Dodanie background-blend-mode (albo mix-blend-mode dla osobnych elementów) zamienia zwykłe krycie na wzór typu multiply, screen czy overlay – ten sam zestaw kolorów daje wtedy inny rezultat niż przy czystej kompozycji alfa. Trzecia rzecz to przestrzeń barw: przeglądarki mieszają kolory w sRGB z premultiplikacją kanału alfa, dlatego przejście między odległymi barwami potrafi przejść przez szary. Wersja SVG omija to częściowo, bo feGaussianBlur rozmywa całe kształty, a feMerge składa je jak warstwy rastrowe.

Przykład krok po kroku: trzy plamy na jednym tle

Ustal dwa kolory plam – #ff6b6b i #4ecdc4 – i policz kolor pośredni, który posłuży jako spód. Składowe: R (255+78)/2 = 166,5, czyli 166 (A6); G (107+205)/2 = 156 (9C); B (107+196)/2 = 151,5, czyli 152 (98). Kolor pośredni to #a69c98 i trafia do background-color kontenera.
Pierwsza plama, wpisana jako pierwsza warstwa: radial-gradient(ellipse 60% 60% at 15% 25%, #ff6b6b 0%, transparent 70%). Środek w lewym górnym rejonie, promienie po 60% szerokości i wysokości, przejście do przezroczystości na 70% promienia.
Druga plama w prawym górnym rejonie: radial-gradient(ellipse 60% 60% at 85% 20%, #4ecdc4 0%, transparent 70%).
Trzecia plama z koloru pośredniego, dołem, żeby zasypać miejsce, w którym pierwsze dwie się nie nakładają: radial-gradient(ellipse 55% 55% at 50% 85%, #a69c98 0%, transparent 60%).
Sklej wszystko w jedno tło: gradienty rozdzielone przecinkami w background, na końcu background-color: #a69c98. Kolejność plam ustala, która jest widoczna na wierzchu – pierwszą w liście zostaw tę, która ma dominować.
Sprawdź wynik i koryguj stopami. Jeśli krawędzie plam są widoczne, przesuń przezroczysty stop z 70% na 80%. Jeśli plamy zlewają się w jedną masę, obniż krycie koloru startowego, np. z pełnego #ff6b6b na rgba(255,107,107,0.75).

Parametry sterujące gradientem siatkowym – ściągawka

Parametr	Wartości w CSS i w narzędziu	Co zmienia w obrazie
Pozycja środka plamy (at X% Y%)	dwa procenty: poziomo i pionowo, np. 15% 25%	przesuwa plamę; procenty liczą się od rozmiaru elementu, nie od ekranu
Lista stopów	od 0% do 100%, od pełnego koloru do transparent	steruje ostrością przejścia i średnicą widocznej plamy
Promienie elipsy	para wartości, np. 60% 60%: poziom i pion	rozciąga plamę i zmienia obszar nakładania z sąsiednimi
Krycie koloru (alpha)	0–1 albo 0%–100%	decyduje, ile warstwy spodu przebija przez plamę
background-blend-mode / mix-blend-mode	multiply, screen, overlay i pozostałe tryby	zmienia wzór mieszania warstw; te same kolory dają inny rezultat
Kolejność w background	lista rozdzielona przecinkami	pierwsza warstwa leży na wierzchu, ostatnia pod spodem
background-size + @keyframes	skalowanie tła i klatki animacji	wprawia plamy w ruch – efekt aurory, migotanie
feGaussianBlur stdDeviation	promień rozmycia w jednostkach SVG	miękkość krawędzi w wersji wektorowej

Praktyczne wskazówki przy pracy z gradientem siatkowym

Zacznij od dwóch plam – dopiero gdy zobaczysz, jak się nakładają, dodawaj trzecią. Każda kolejna warstwa utrudnia przewidzenie wyniku i zwiększa koszt renderowania.
Trzymaj paletę pokrewną – kolory o zbliżonym odcieniu dają miękkie, organiczne przejścia. Bardzo odległe barwy przechodzą w środku przez szary, co widać szczególnie na dużych powierzchniach.
Kontroluj nakładanie, nie liczbę plam – o gęstości efektu decyduje to, jak mocno plamy na siebie zachodzą. Przesunięcie środka o kilka procent zmienia obraz bardziej niż dodanie kolejnej warstwy.
Testuj na docelowym rozmiarze i proporcjach – pozycje w procentach rozciągają się razem z elementem, więc ten sam kod na szerokim banerze i w kwadratowym kafelku wygląda inaczej.
Pilnuj kontrastu tekstu – gradient siatkowy bywa jasny w jednym miejscu i ciemny w drugim. Sprawdzaj czytelność na najjaśniejszym fragmencie albo dodaj półprzezroczystą nakładkę pod treścią.

Czego gradient siatkowy nie uwzględnia

Brak natywnego mesh w CSS – nie istnieje jedna funkcja tworząca taki gradient. Wynik zawsze jest kompozycją kilku radial-gradientów, więc przy przenoszeniu projektu do innego narzędzia warstwy trzeba odtworzyć ręcznie.
Interpolacja w sRGB – przeglądarki mieszają kolory w sRGB z premultiplikacją alfa, a nie w przestrzeniach percepcyjnych. Efekt może się różnić od tego, co pokazuje Figma, Procreate czy inne narzędzie pracujące w OKLab.
Wydajność przy animacji – wiele warstw z rozmyciem i animacją obciąża GPU. Na słabszych urządzeniach klatki potrafią spadać, a prążkowanie staje się widoczne na dużych, jednolitych obszarach.
Druk i gamut – jaskrawe, neonowe zestawy barw wychodzą poza zakres CMYK. W druku kolory zgasną, a płynne przejścia mogą zamienić się w widoczne pasma.

Najczęstsze pytania

Jak stworzyć mesh gradient w CSS?

Metoda 1: Wielokrotny radial-gradient. background: radial-gradient(ellipse at 10% 20%, rgba(255,100,100,0.8) 0%, transparent 50%), radial-gradient(ellipse at 90% 80%, rgba(100,200,255,0.8) 0%, transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(150,100,255,0.6) 0%, transparent 60%), #1a1a2e. Dostosuj pozycje (at X% Y%) i kolory.

Jak animować gradient w CSS?

@keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .hero { background: linear-gradient(270deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400% 400%; animation: gradient 15s ease infinite; } GPU-accelerated: transform zamiast background-position.

Jak dodać efekt szumu do gradientu?

Grainy gradient: gradient + noise texture. SVG noise: . CSS: background-image: url("noise.svg"), gradient. Alternatywa: CSS Houdini. Efekt: dodaje organiczność, znosi "plastikowy" wygląd. Popularność: Spotify, Linear, Lottie używają grainy gradients. Rozmiar pliku SVG noise: kilka KB.

Jakie kolory wybrać do gradientu?

Analogiczne: sąsiednie na kole kolorów (harmonia). Komplementarne: naprzeciwko (kontrast). Triadyczne: 3 kolory 120° od siebie. Ograniczenie: max 3-4 kolory. Narzędzia: coolors.co, paletton.com, Adobe Color. Ciemny motyw: nasycone + neonowe akcenty. Jasny motyw: pastelowe. Unikaj: zbyt wiele różnych kolorów = błoto.

Jak gradient wpływa na dostępność (accessibility)?

Tekst na gradiencie: sprawdź kontrast na każdej części. WCAG 2.1: min 4.5:1 dla tekstu normalnego, 3:1 dla dużego. Narzędzie: WebAIM Contrast Checker. Problem: gradient zmienia kontrast w zależności od miejsca. Rozwiązanie: tekst-shadow lub półprzezroczyste tło za tekstem. Animowany gradient: może powodować problemy u osób z epilepsją → prefers-reduced-motion.

Czy CSS ma natywny mesh gradient?

Nie. Nie ma funkcji mesh-gradient ani gradientu siatkowego w specyfikacji CSS. Efekt uzyskuje się przez nałożenie kilku radial-gradientów, opcjonalnie z blend mode, albo przez SVG z rozmyciem kształtów.

Czym różni się gradient siatkowy od zwykłego radialnego?

Pojedynczy radial-gradient daje jedną plamę rozchodzącą się od środka na zewnątrz. Gradient siatkowy to kilka takich plam w różnych miejscach i kolorach, których wzajemne nakładanie tworzy przejścia w wielu kierunkach naraz.

Dlaczego środek mojego gradientu wychodzi szary?

To skutek mieszania w sRGB. Gdy nakładasz dwie barwy leżące daleko od siebie na kole kolorów, ich średnia wypada szara. Pomaga dodanie trzeciej plamy w kolorze pośrednim albo użycie barw pokrewnych.

Ile plam powinien mieć gradient siatkowy?

Najlepiej zacząć od dwóch i dołożyć trzecią lub czwartą, jeśli brakuje głębi. Więcej warstw daje gęstszą mgłę, ale trudniej przewidzieć efekt i rośnie obciążenie przy animacji.

Czy taki gradient nadaje się na tło pod tekst?

Tak, pod warunkiem że sprawdzisz kontrast na najjaśniejszym fragmencie tła. Gradienty siatkowe są nierówne, więc bezpieczniej dodać półprzezroczystą nakładkę, cień tekstu albo ograniczyć jasne plamy do marginesów.

Powiązane narzedzia: generator gradientów CSS, kalkulator kontrastu kolorow i picker kolorow HSL.