Raster generator voor een transparante PNG of SVG
Deze raster generator online tekent gelijkmatig verdeelde lijnen op een doorzichtige achtergrond, precies op de pixelgrootte die jij kiest. Je stelt kolommen, rijen, lijndikte en kleur in en downloadt het raster als PNG of SVG, of kopieert het als CSS-achtergrond. Gebruik het als hulplaag over een ontwerp, een layout of een screenshot. Alles draait in je browser en er wordt niets geüpload.
Een raster maken in vier stappen
Het raster wordt direct op de pagina getekend:
- Vul de Breedte van het canvas (px) en de Hoogte van het canvas (px) in. Beide lopen van 10 tot 5000 en beginnen op 1920 bij 1080.
- Stel de Kolommen (1 tot 200, begint op 12) en de Rijen (1 tot 200, begint op 6) in.
- Kies de Lijndikte (px) van 1 tot 50 en een Lijnkleur. Standaard is dat rood, #FF0000.
- Bekijk het voorbeeld en kies dan PNG downloaden, SVG downloaden of CSS kopiëren.
Er is geen knop om toe te passen. Het voorbeeld wordt opnieuw getekend terwijl je typt, en het dambord erachter laat zien welke delen van het bestand transparant zijn. Dat dambord hoort niet bij de download.
Celgrootte uit canvas, kolommen en rijen
Het canvas wordt gelijk verdeeld: de breedte van een cel is de breedte gedeeld door de kolommen, de hoogte is de hoogte gedeeld door de rijen. De regel “Elke cel is … × … px” onder het voorbeeld toont het resultaat terwijl je waarden aanpast. Voor vierkante cellen kies je getallen die in beide richtingen dezelfde maat geven. Een canvas van 1920 × 1080 met 16 kolommen en 9 rijen geeft cellen van 120 × 120 px.
De lijnen staan gecentreerd op elke interne verdeling. Als het canvas niet precies deelbaar is, kan een lijn tussen twee pixels vallen en in de PNG iets zacht ogen. Kies voor scherpe lijnen een breedte die een veelvoud is van het aantal kolommen en een hoogte die een veelvoud is van het aantal rijen.
3x3 raster PNG en andere gangbare formaten
Dit zijn de formaten waar het vaakst naar gevraagd wordt (breedte × hoogte, kolommen × rijen, celgrootte):
- Vierkante cellen op full HD: 1920 × 1080, 16 × 9, 120 × 120 px
- Vierkante cellen op 4K: 3840 × 2160, 32 × 18, 120 × 120 px
- Vierkant 3×3-raster: 1080 × 1080, 3 × 3, 360 × 360 px
- Verticaal 3×3-raster in 9:16: 1080 × 1920, 3 × 3, 360 × 640 px
Een raster voor Figma kun je met deze maten direct op een frame leggen.
Lijndikte, lijnkleur en geavanceerde opties
De lijndikte is de streepbreedte in pixels van het canvas. Op een groot canvas heeft een dunne lijn daarom een hogere waarde nodig om zichtbaar te blijven als de afbeelding wordt verkleind. Het veld voor de lijnkleur opent de kleurkiezer van je browser en toont ernaast de hexwaarde. Kies een kleur die contrasteert met de ondergrond: wit over donker werk, een donkere kleur over licht werk.
Onder Geavanceerde opties vind je drie selectievakjes. Een gewoon raster heeft alleen lijnen op de interne verdelingen, dus de randen van het bestand blijven leeg.
- Buitenrand voegt een kader toe. Het wordt binnen de rand van het canvas getekend en houdt daardoor de volledige lijndikte.
- Middenkruis voegt één verticale en één horizontale lijn door het midden toe. Bij een even aantal kolommen of rijen ligt daar al een lijn, dus je ziet alleen verschil bij oneven aantallen.
- Diagonale lijnen voegt twee lijnen van hoek naar hoek toe die elkaar in het midden kruisen.
Download als PNG of SVG, of kopieer de CSS
PNG downloaden bewaart een transparante afbeelding op precies de canvasgrootte, met een naam als raster-1920x1080.png. SVG downloaden bewaart hetzelfde raster als vectorlijnen zonder achtergrond, met een naam als raster-1920x1080.svg. CSS kopiëren zet een regel background-image: url("data:image/svg+xml,...") en een regel background-size op je klembord, zodat een ontwikkelaar het raster over een pagina kan leggen zonder apart afbeeldingsbestand.
De achtergrond herhaalt standaard. Als je hem tegelt, bedenk dan dat een gewoon raster geen lijn op de buitenrand heeft. Met Buitenrand aan komen op elke naad twee randen samen en lijken ze ongeveer twee keer zo dik als de waarde die je instelde.
Raster op foto maken, of CSS-layoutcode?
Wil je een raster over een afbeelding tekenen die je al hebt, voor de rastermethode om te tekenen, gebruik dan de Raster Afbeelding Generator. Wil je een paginalayout bouwen en code voor grid-template-areas krijgen, dan is de CSS Grid Generator de juiste keuze. Deze tool is voor het lege, transparante rasterbestand zelf.
Veelgestelde vragen
Hoe maak ik een PNG met een transparant raster?
Vul “Breedte van het canvas (px)” en “Hoogte van het canvas (px)” in, stel “Kolommen” en “Rijen” in, kies een “Lijnkleur” en kies “PNG downloaden”. De achtergrond van het bestand is transparant. Het dambord in het voorbeeld laat dat alleen zien. Het bestand wordt bewaard als bijvoorbeeld raster-1920x1080.png, met jouw eigen maat in de naam.
Hoe maak ik een 3x3 raster als PNG?
Zet “Kolommen” op 3 en “Rijen” op 3. Dat tekent twee verticale en twee horizontale lijnen en verdeelt het canvas in negen gelijke cellen. Zet onder “Geavanceerde opties” “Buitenrand” aan als je ook een kader om de rand wilt, en kies dan “PNG downloaden”.
Welk formaat moet een raster in 9:16 hebben?
Zet “Breedte van het canvas (px)” op 1080 en “Hoogte van het canvas (px)” op 1920 voor een verticale afbeelding over het hele scherm. 2160 bij 3840 is dezelfde 9:16-vorm met twee keer zoveel detail. Beide passen binnen de limiet van 5000 px. De regel onder het voorbeeld toont de grootte van één cel.
Hoe maak ik een wit raster als overlay?
Kies wit, #FFFFFF, bij “Lijnkleur”. Witte lijnen zijn op het dambord van het voorbeeld lastig te zien, maar de gedownloade PNG bewaart ze op een transparante achtergrond. Ze zijn dus zichtbaar zodra je het bestand over een foto of donkere layout legt.
Kan ik het raster ook als SVG bewaren?
Ja. Kies “SVG downloaden” om hetzelfde raster als vectorbestand te bewaren, bijvoorbeeld raster-1920x1080.svg. De lijnen zijn strepen in jouw gekozen kleur en er is geen achtergrondvulling, dus het blijft scherp bij elke zoom en opent in een browser of in elk vectorprogramma.
Hoe gebruik ik het raster als CSS-achtergrond?
Kies “CSS kopiëren” en plak het resultaat in een regel. Je krijgt een background-image met het raster als inline SVG, plus een background-size gelijk aan je canvasgrootte. Pas background-size aan om het raster te schalen, of kies een klein canvas en laat de achtergrond herhalen. Zonder “Buitenrand” hebben de randen van de tegels geen lijn.
Hoe voeg ik een raster toe in Illustrator of Figma?
Beide programma’s hebben eigen rasters en hulplijnen. Gebruik deze generator als je een raster als bestand op een exacte maat wilt. Open de SVG in Illustrator om de lijnen als vectoren te houden, of leg de PNG als transparante laag over je werk. In Figma kun je beide bestanden aan een frame toevoegen.
Waarom is mijn PNG kleiner op een iPhone of iPad?
Safari op iPhone en iPad geeft boven ongeveer 16 miljoen pixels een lege afbeelding terug. Daarom wordt de PNG daar verkleind en toont een melding de maat waarop hij is bewaard. De SVG behoudt altijd de volledige maat die je vroeg, gebruik die dus als je exacte afmetingen nodig hebt.
Aanbevolen
-
Pentel GraphGear 500 vulpotloodSchets eerst je opzet op papier, met dunne lijnen die bij je raster passen
-
Leuchtturm1917 notitieboek A5, stippenSchets je schermen eerst op een stippenraster voordat je Figma opent
-
Wacom Intuos Small TekentabletTeken op je rasterlaag met de hand, met een pen die je cursor volgt
Help de tools gratis te houden. ✨
Afbeeldingen dienen ter illustratie. Als Amazon-Partner verdien ik aan in aanmerking komende aankopen.
