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ść (Softness) 72%

Seed (ziarno) 24680

Wysokość podglądu 320px

Tryb mieszania (Blend Mode)

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;
}

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.

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.

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