CSS Sprite Sheet Generator

A sprite sheet is one image that holds several smaller ones. Each element on your page uses the whole sheet as its background, but is only as big as one image, and background-position slides the sheet so the right image shows through, like a window.

The browser downloads one file instead of one per image, and every image is ready once the sheet has loaded, so a hover state doesn’t flicker while a second file arrives.

Sprites date from when every extra request slowed a page down. With HTTP/2 and HTTP/3, browsers fetch many small files over one connection, so saving requests matters much less than it did. For one-colour interface icons, SVG is usually better: it stays sharp at any size and can take its colour from CSS (the SVG Cleaner prepares icons for that). Sprites still suit:

• Game graphics and animation: a horizontal strip of equal-sized frames for a CSS steps() animation, or a grid of tiles.
• Sets of small multi-colour images, such as flags or payment logos, that would otherwise be dozens of tiny files.
• Button states, such as normal and hover, kept in one file so the swap is instant.

Images go on the sheet at their own size, never scaled, and the sheet is always a PNG, so transparency is kept. Give an SVG a width and height before adding it; without them, the browser picks a size for it.

Class names come from the file names: search.png becomes .sprite-search. Letters are made lowercase and anything other than letters, numbers, hyphens and underscores becomes a hyphen, so “Social Icon@2x.png” becomes .sprite-social-icon-2x. If two images end up with the same name, the second gets -1 on the end. This is the CSS for three 32 px icons with 8 px of padding:

/* Sprite Sheet CSS */
.sprite {
  background-image: url('sprite-sheet.png');
  background-repeat: no-repeat;
  display: inline-block;
}

.sprite-home {
  width: 32px;
  height: 32px;
  background-position: -0px -0px;
}

.sprite-search {
  width: 32px;
  height: 32px;
  background-position: -40px -0px;
}

.sprite-cart {
  width: 32px;
  height: 32px;
  background-position: -80px -0px;
}

Give each element both classes: the first loads the sheet, the second picks the image. A background image has no alt text, so label icons that carry meaning:

<span class="sprite sprite-search" role="img" aria-label="Search"></span>

The url() expects sprite-sheet.png in the same folder as the stylesheet. If you paste the rules into another stylesheet, change it to wherever you upload the image.

The CSS shows each image at its own pixel size, so on phones and other high-resolution screens it can look soft. For sharp icons, add images at twice the size you’ll show them, then halve every number in the CSS and add a background-size of half the sheet. Three 64 px icons with 16 px of padding make a 224 × 64 sheet, so to show them at 32 px:

.sprite {
  background-image: url('sprite-sheet.png');
  background-repeat: no-repeat;
  background-size: 112px 32px;
  display: inline-block;
}

.sprite-home { width: 32px; height: 32px; background-position: 0 0; }
.sprite-search { width: 32px; height: 32px; background-position: -40px 0; }
.sprite-cart { width: 32px; height: 32px; background-position: -80px 0; }

Use even sizes and padding, so every halved number is a whole pixel.

The sheet and CSS are made by your browser, on your own device, so your images are never uploaded.

You can check this yourself: open your browser’s developer tools, watch the Network tab and generate a sprite sheet. The only requests are anonymous usage counts, described in our privacy policy.