Alle kleurtools

Maak naadloze SVG-achtergrondpatronen uit bijna 2.000 ontwerpen: pas kleuren, zoom, tussenruimte en hoek aan en kopieer de CSS of download SVG, PNG of WebP.

Gratis

1Kies een patroon

Uw kop komt hier

Bekijk hoe het patroon achter echte inhoud staat.

Aan de slag
Patroon

Bladeren per collectie


Over Patroongenerator

De patroongenerator verandert bijna 2.000 kant-en-klare ontwerpen in achtergronden die u kunt afstemmen en meteen kunt gebruiken. Blader door 14 collecties, van golven, polkastippen en tessellaties tot tartans, Japanse seigaiha, islamitische sterren, Art Deco-waaiers, pixelsprites en camouflage, en zie elk ontwerp in uw eigen kleuren.

Elk ontwerp is getekend als vectorafbeelding en herhaalt zich zonder zichtbare naad, bij elke zoom en elke hoek. Wijzig maximaal zes kleuren, de zoom, positie, tussenruimte, lijndikte en hoek, verander gevulde vormen in omtrekken of laat het patroon bewegen met een lusanimatie. Generatieve patronen zoals topografische kaarten, Voronoi-cellen en Truchet-tegels kunnen bij elke klik een nieuwe variatie opleveren.

Ziet het er goed uit, kopieer het dan als CSS, SCSS, Tailwind-configuratie, inline SVG, data-URI of React-component, of download een SVG, PNG, JPG of WebP in elk formaat tot 8000 pixels, inclusief één enkele tegel voor uw eigen herhaling. Alles draait in uw browser: er wordt niets geüpload en er is geen account nodig.

Hoe gebruik je Patroongenerator

  1. Kies een patroon: zoek op naam of filter op collectie en aantal kleuren.
  2. Kies de kleuren met de kleurkiezers, een kant-en-klaar palet of “Nieuw palet”.
  3. Pas zoom, positie, tussenruimte, lijndikte en hoek aan. Vergrendel elke waarde die u bevalt voordat u op “Inspireer mij” drukt.
  4. Controleer het resultaat met de voorbeelden “Tegel tonen”, “Op een pagina” en “In tekst”.
  5. Kopieer de code of download het bestand en gebruik “Link kopiëren” om later naar precies dit patroon terug te keren.

Veelgestelde vragen

Ja. De tool is gratis, zonder registratie en zonder limiet: elk patroon wordt in uw browser getekend, dus er wordt geen bestand naar een server gestuurd.

Ja. U mag de geëxporteerde patronen gebruiken in persoonlijk en commercieel werk, zoals websites, apps, verpakkingen en drukwerk, zonder bronvermelding.

Nee. Elke vorm die over de rand van een tegel loopt, wordt aan de andere kant opnieuw getekend, zodat de herhaling naadloos is. Met het voorbeeld “Tegel tonen” ziet u precies waar een tegel begint en eindigt.

CSS is het eenvoudigst: plak de regel in uw stylesheet en pas hem toe op elk element. Bij 0, 90, 180 of 270 graden gebruikt het één kleine tegel met background-size; bij andere hoeken gebruikt het een SVG die het element vult. De versies voor Tailwind, SCSS, React en data-URI bevatten hetzelfde patroon.

De animatie zit in de SVG ingebouwd, dus er is geen script nodig en ze werkt in moderne browsers ook als CSS-achtergrond. Controleer het resultaat in de browsers die u ondersteunt. PNG-, JPG- en WebP-bestanden blijven stilstaande afbeeldingen en bevatten alleen het eerste beeld.

Organische ontwerpen zoals camouflage en topografische kaarten bevatten veel bochten. De grootte van de code staat naast de kopieerknop. Is die te zwaar voor een pagina, kies dan een ontwerp met een kleinere tegel of gebruik in plaats daarvan een PNG-tegel.

Ja, bij bijna elk patroon: schakel “Transparante achtergrond” in en exporteer als CSS, SVG, PNG of WebP. Enkele ontwerpen met overlappende vormen verbergen delen met de achtergrondkleur en hebben dus een effen achtergrond nodig. JPG-bestanden ondersteunen geen transparantie.


Populaire zoekopdrachten
svg patroon generator naadloos patroon maken css achtergrondpatroon herhalend patroon maken gratis achtergrondpatronen geometrische patronen maken tailwind achtergrondpatroon naadloze tegel png
Hulp nodig?
Een probleem met deze tool gevonden? Laat het ons weten.
Een probleem melden

Voeg deze gratis tool toe aan je eigen website: kopieer en plak de onderstaande code.