CSS-patroonachtergrondgenerator

De meeste 'patroongenerator'-tools hergebruiken stilletjes dezelfde repeating-linear-gradient-formule voor elke optie en passen alleen de getallen aan. Deze niet: elk van de zes patroontypen hier is opgebouwd met de specifieke CSS-techniek die die vorm daadwerkelijk produceert. Strepen gebruiken één repeating-linear-gradient met twee kleurbanden. Stippen gebruiken één radial-gradient die puur via background-size wordt getegeld — de klassieke CSS-stippentruc — in plaats van een repeating-radial-gradient, die een ronde stip niet netjes op een rechthoekig raster kan tegelen. Dambord gebruikt de echte vierkwadrant-conic-gradient-formule: een conic gradient gecentreerd in een vierkante tegel splitst op natuurlijke wijze in vier kwadrantvierkanten op 90-gradengrenzen, en het afwisselen van twee kleuren over die kwadranten tegelt tot een echt dambord, geen benadering.

Raster en diagonale kruisarcering stapelen beide twee repeating-linear-gradients als afzonderlijke background-image-elementen in plaats van de tweede richting te faken met border-trucs. Raster combineert een 'naar rechts'- en een 'naar beneden'-repeating gradient voor scherpe horizontale en verticale lijnen. Kruisarcering legt een +45°- en een -45°-repeating gradient over elkaar voor een diagonaal weefsel in mandvlechtstijl — het is de moeite waard om precies te zijn: dit is een oprechte kruisarcering, geen echte visgraatgeometrie, en de tool benoemt het zo zonder te overdrijven. Driehoeken hergebruiken de vierkwadrant-conic-gradient-techniek van het dambord, maar starten de gradiënt 45 graden gedraaid, waardoor de wigranden verschuiven van de middens van de tegelranden naar de hoeken en dezelfde vier wiggen veranderen in vier hoek-tot-hoek-driehoeken in plaats van vier kwadrantvierkanten.

Elk patroontype toont alleen de regelaars die er daadwerkelijk op van toepassing zijn — een hoekschuifregelaar verschijnt voor strepen, stipradius en -afstand voor stippen, lijndikte voor raster en kruisarcering — en het grote getegelde voorbeeldvak wordt bij elke wijziging opnieuw getekend, zodat je meerdere volledige herhalingen kunt zien voordat je een waarde vastlegt. Zet de uitvoermodus op SVG en hetzelfde patroon verschijnt opnieuw als een <pattern>-element opgebouwd uit eenvoudige rect-, circle-, path- of polygon-primitieven, klaar om in de <defs> van elk SVG-document te plakken, met een download met één klik voor een zelfstandig .svg-bestand.

Alles draait lokaal in je browser: geen afbeeldingen uploaden, geen server-roundtrip, geen account. Voor effen of verloopvullingen zonder herhaling is de CSS-gradiëntgenerator op deze site het juiste gereedschap; deze is specifiek voor tegelbare geometrische achtergronden opgebouwd uit nul afbeeldingsassets.