Transparent Grid PNG Generator
This transparent grid PNG generator draws evenly spaced lines on a clear background at the exact pixel size you choose. Set the columns, rows, line thickness and color, then download the grid as a PNG or SVG, or copy it as a CSS background. Use it as a guide layer over artwork, a layout or a screenshot. It runs in your browser and nothing is uploaded.
How to make a transparent grid PNG
- Enter the Canvas width (px) and Canvas height (px). Each runs from 10 to 5000 and starts at 1920 by 1080.
- Set Columns (1 to 200, starts at 12) and Rows (1 to 200, starts at 6).
- Set Line thickness (px) from 1 to 50 and pick a Line color. The default is red, #FF0000.
- Check the preview, then press Download PNG, Download SVG or Copy CSS.
There is no Apply button. The preview redraws as you type, and the checkerboard behind it shows which parts of the file are transparent. That checkerboard is not part of the download.
Canvas size, columns and rows set the cell size
The canvas is divided evenly, so each cell is the width divided by the columns and the height divided by the rows. The line Each cell is W × H px under the preview shows the result as you change a value. For square cells, pick numbers that give the same size both ways. A 1920 × 1080 canvas with 16 columns and 9 rows makes 120 × 120 px cells.
Lines are drawn centered on each internal division. If the canvas does not divide evenly, a line can fall between two pixels and look a little soft in the PNG. Choose a width that is a multiple of the number of columns, and a height that is a multiple of the rows, for crisp lines.
Grid PNG sizes people ask for
| Use | Width × Height | Columns × Rows | Cell size |
|---|---|---|---|
| Square cells on full HD | 1920 × 1080 | 16 × 9 | 120 × 120 px |
| Square cells on 4K | 3840 × 2160 | 32 × 18 | 120 × 120 px |
| 3x3 grid, square | 1080 × 1080 | 3 × 3 | 360 × 360 px |
| 3x3 grid, 9:16 vertical | 1080 × 1920 | 3 × 3 | 360 × 640 px |
Line thickness and line color
Line thickness (px) is the stroke width in canvas pixels, so on a large canvas a thin line needs a higher value to stay visible when the image is scaled down. The Line color field opens your browser's color picker and shows the hex value next to it. Pick a color that contrasts with what the grid will sit on: white over dark artwork, a dark color over light.
Outer border, center crosshair and diagonal lines
Open Advanced options for three checkboxes. A plain grid has lines only on the internal divisions, so the edges of the file are empty.
- Outer border adds a frame. It is drawn inside the canvas edge, so it keeps the full line thickness.
- Center crosshair adds one vertical and one horizontal line through the middle. With an even number of columns or rows the middle already has a line, so you only see a change with odd counts.
- Diagonal lines adds two lines from corner to corner across the whole canvas, crossing in the center.
Download PNG, download SVG or copy CSS
Download PNG saves a transparent image at exactly the canvas size, named like
grid-1920x1080.png. Download SVG saves the same grid as vector
lines, named like grid-1920x1080.svg, with no background. Copy CSS
puts a background-image: url("data:image/svg+xml,...") line and a
background-size line on your clipboard, so a developer can lay the grid over a page
without a separate image file.
The background repeats by default. If you tile it, remember the plain grid has no line on its outer edge. With Outer border on, two borders meet at every seam and look about twice as thick as the value you set.
Need a grid on a photo, or CSS layout code?
To draw a grid over a picture you already have, for the grid method of drawing, use the
Grid Image Generator. If you want to build a page layout and get
grid-template-areas code, the CSS Grid Generator is
the one to use. This tool is for the blank, transparent grid file itself.
Grid PNG and SVG questions
How do I make a transparent grid PNG?
Enter the Canvas width (px) and Canvas height (px), set Columns and Rows, choose a Line color, then press Download PNG. The background of the file is transparent. The checkerboard in the preview is only there to show that. The file is saved as grid-1920x1080.png, with your own size in the name.
How do I make a 3x3 grid PNG?
Set Columns to 3 and Rows to 3. That draws two vertical and two horizontal lines and splits the canvas into nine equal cells. Turn on Outer border in Advanced options if you also want a frame around the edge, then press Download PNG.
What size should a 9:16 grid PNG be?
Set Canvas width (px) to 1080 and Canvas height (px) to 1920 for a full-screen vertical image. 2160 by 3840 is the same 9:16 shape at twice the detail. Both fit inside the 5000 px limit. The readout under the preview shows the size of one cell.
How do I make a white grid overlay PNG?
Select the Line color swatch and choose white, #FFFFFF. White lines can be hard to see on the preview checkerboard, but the downloaded PNG keeps them on a transparent background, so they show up once you place the file over a photo or a dark layout.
Can I make an SVG grid?
Yes. Press Download SVG to save the same grid as a vector file, such as grid-1920x1080.svg. The lines are strokes in your chosen color and there is no background fill, so it stays sharp at any zoom and opens in a browser or any vector editor.
How do I use the grid as a CSS background?
Press Copy CSS and paste the result into a rule. You get a background-image with the grid as an inline SVG, plus a background-size equal to your canvas size. Change background-size to scale the grid, or set a small canvas and let the background repeat. Without Outer border the tile edges have no line.
How do I add a grid in Illustrator or Figma?
Both apps have their own built-in grids and guides. Use this generator when you want a grid as a file at an exact size. Open the SVG in Illustrator to keep the lines as vectors, or place the PNG over your artwork as a transparent layer. In Figma you can add either file to a frame.
Why is my PNG smaller on an iPhone or iPad?
Safari on iPhone and iPad returns a blank image above about 16 million pixels, so the PNG there is scaled down to fit and a note shows the size it was saved at. The SVG always keeps the full size you asked for, so use it when you need the exact dimensions.
Recommended
-
Pentel GraphGear 500 Drafting PencilSketch the layout on paper first, with fine lines that match your grid
-
Leuchtturm1917 Dotted Notebook (A5)Rough out your screens on a dot grid before you open Figma
-
Wacom Intuos Small Drawing TabletDraw on your grid layer by hand, with a pen that follows your cursor
Helps keep the tools free. ✨
Images are for illustration only. As an Amazon Associate I earn from qualifying purchases.
