Mönstergenerator

Alla färgverktyg

Skapa sömlösa SVG-bakgrundsmönster av nästan 2 000 förlagor: ändra färger, zoom, avstånd och vinkel och kopiera sedan CSS eller ladda ner SVG, PNG eller WebP.

Gratis

1Välj ett mönster

Alla Linjer och vågor Prickar och cirklar Geometriska 3D och illusioner Textilier och vävar Tegel och kakel Japanska Islamiska och morisk stil Art Deco Tribala och folkliga Natur Ikoner och föremål Pixelkonst Generativa

Din rubrik här

Se hur mönstret ser ut bakom verkligt innehåll.

Kom igång
Mönster

Bläddra efter samling

Linjer och vågor 273 mönster Prickar och cirklar 189 mönster Geometriska 138 mönster 3D och illusioner 99 mönster Textilier och vävar 105 mönster Tegel och kakel 148 mönster Japanska 33 mönster Islamiska och morisk stil 30 mönster Art Deco 47 mönster Tribala och folkliga 62 mönster Natur 196 mönster Ikoner och föremål 236 mönster Pixelkonst 152 mönster Generativa 251 mönster

Om Mönstergenerator

Mönstergeneratorn förvandlar nästan 2 000 färdiga förlagor till bakgrunder som kan finjusteras och användas direkt. Bläddra bland 14 samlingar, från vågor, polkaprickar och tesselleringar till tartan, japansk seigaiha, islamiska stjärnor, Art Deco-solfjädrar, pixelsprites och kamouflage, och se varje förlaga i egna färger.

Varje förlaga är ritad som vektorgrafik och upprepas utan synlig skarv, vid alla zoomnivåer och i alla vinklar. Ändra upp till sex färger, zoom, position, avstånd, linjebredd och vinkel, förvandla fyllda former till konturer eller låt mönstret röra sig i en loopad animation. Generativa mönster som topografiska kartor, Voronoi-celler och Truchet-brickor kan ge en ny variant vid varje klick.

När resultatet ser rätt ut kan det kopieras som CSS, SCSS, Tailwind-konfiguration, inbäddad SVG, data-URI eller React-komponent, eller laddas ner som SVG, PNG, JPG eller WebP i valfri storlek upp till 8000 pixlar, inklusive en enskild bricka för egen upprepning. Allt körs i webbläsaren: ingenting laddas upp och inget konto behövs.

Så använder du Mönstergenerator

  1. Välj ett mönster: sök på namn eller filtrera efter samling och antal färger.
  2. Välj färgerna med färgväljarna, en färdig palett eller ”Ny palett”.
  3. Justera zoom, position, avstånd, linjebredd och vinkel. Lås de värden som passar innan ”Inspirera mig” väljs.
  4. Kontrollera resultatet med förhandsvisningarna ”Visa brickan”, ”På en sida” och ”I text”.
  5. Kopiera koden eller ladda ner filen och använd ”Kopiera länk” för att senare komma tillbaka till exakt det här mönstret.

Vanliga frågor

Ja. Verktyget är gratis, utan registrering och utan begränsning: varje mönster ritas i webbläsaren, så ingen fil skickas till någon server.

Ja. Exporterade mönster får användas i privata och kommersiella sammanhang, till exempel webbplatser, appar, förpackningar och tryck, utan krav på källhänvisning.

Nej. Varje form som korsar kanten på en bricka ritas upp igen på motsatt sida, så upprepningen är sömlös. Med förhandsvisningen ”Visa brickan” syns exakt var en bricka börjar och slutar.

CSS är enklast: klistra in regeln i formatmallen och använd den på valfritt element. Vid 0, 90, 180 eller 270 grader används en liten bricka med background-size; vid andra vinklar används en SVG som fyller elementet. Versionerna för Tailwind, SCSS, React och data-URI innehåller samma mönster.

Animationen är inbyggd i SVG-filen, så inget skript behövs och den fungerar även som CSS-bakgrund i moderna webbläsare. Testa den i de webbläsare som ska stödjas. PNG-, JPG- och WebP-filer är fortfarande stillbilder och behåller bara första bildrutan.

Organiska förlagor som kamouflage och topografiska kartor innehåller många kurvor. Kodens storlek visas intill kopieringsknappen. Om den är för tung för en sida, välj en förlaga med mindre bricka eller använd en PNG-bricka i stället.

Ja, för nästan alla mönster: aktivera ”Genomskinlig bakgrund” och exportera som CSS, SVG, PNG eller WebP. Några förlagor med överlappande former döljer delar med bakgrundsfärgen och kräver därför en enfärgad bakgrund. JPG-filer stöder inte genomskinlighet.
Dela
Relaterade verktyg
Gradientgenerator
Färgpalettsgenerator
Nyansgenerator
Skapa gradient från bild
Helröd skärm
AI-generator för teman och gradienter
AI-varumärkespalettgenerator
Pantone-färgmatchare
Typsnittsparning & Google Fonts-katalog
Helsvart skärm
Skärmfärgväljare
Färgblindhetssimulator
Färgpalett från webbplats
Färghjul och färgharmonier
Blanda färger
Exportera färgpalett
AI-stämningspalett
Webbsäker färgpalett
Kontrollera färgkontrast
Färgkodsomvandlare
Populära sökningar
svg mönstergenerator sömlöst mönster generator css bakgrundsmönster skapa upprepande mönster gratis bakgrundsmönster geometrisk mönstergenerator tailwind bakgrundsmönster sömlös bricka png
Behöver du hjälp?
Hittade du ett problem med det här verktyget? Berätta för oss.
Rapportera ett problem

Lägg till det här gratisverktyget på din egen webbplats: kopiera och klistra in koden nedan.