How to use the sprite sheet coordinates calculator
A sprite sheet packs many icons into one image and lets CSS crop out the piece you need. The tedious part is counting a background-position for every cell, and once gaps and an outer margin enter the picture it is easy to land one cell off. Enter the columns, rows, cell size, gaps and margin, and this page returns numbered coordinates plus CSS you can paste as is.
Each coordinate is from left = margin + column index times (cell width + horizontal gap), with the vertical axis working the same way. The full sheet measures the margin on both sides plus the cells and the gaps between them. Because background-position pulls the background left and up, the coordinates carry a minus sign, and a zero is written plainly as 0. The property behavior follows the W3C CSS backgrounds specification as of October 2026.
No standard cell size is suggested: icon grids differ per design, so the coordinates are only correct for the values you actually use. The tool produces coordinates and CSS only — it does not stitch your images into a sheet, and irregular sheets whose cells differ in size are not supported. It maps up to 200 cells at a time.
Frequently asked questions
The element shows only its own box, so the background has to be pulled left and up for the cell you want to land inside it. Only the first cell, at coordinate zero, is written plainly as 0.
No. This calculator assumes a regular grid where every cell is the same size and the gaps are uniform. An irregular sheet has to be measured cell by cell.
The page suggests none. Grid sizes differ between design systems, so the coordinates are only right for the cell size you actually work in.