# CSS Sprite Generator - Pack Images into a Sprite Sheet with CSS, or Slice a Sheet

> Free online CSS sprite generator: pack icons into one sheet with bin packing, grid or row layouts and @2x support, and get the CSS positions, or slice one.

- URL: https://qilingtools.com/en/image/sprite
- Category: Image Tools (https://qilingtools.com/en/image)
- Tags: [Image](https://qilingtools.com/en/tags/image), [Design](https://qilingtools.com/en/tags/design), [Frontend](https://qilingtools.com/en/tags/frontend)
- Last updated: 2026-10-26
- Price: Free, no sign-up
- Privacy: Runs locally in the browser; files are never uploaded

Combining many small icons into one sprite sheet cuts down HTTP requests. Pick your images (transparent PNGs work best) and a growing bin-packing algorithm arranges them compactly — or choose a grid, a single row or a single column — with optional padding to stop edges bleeding into each other. With the @2x option, the sheet is built from double-resolution images and both sprite.png and sprite@2x.png are produced; the CSS uses background-size and a media query to serve the sharp version on high-DPI screens. sprite.css contains a class named after each file with its width, height and background-position, alongside a sprite.json coordinate map and a preview.html page, all in one zip. In the other direction, Slice a sprite sheet cuts game characters, animation frames and other sheets into individual PNGs by rows × columns or by cell size, with start offset and gap support, skipping empty cells automatically.

## How to use

1. Choose Build a sprite sheet and upload several icons, or Slice a sprite sheet and upload one sheet
2. When building, pick the layout, padding, class prefix and @2x option; when slicing, set rows/columns or cell size and check the red-box preview
3. Download the PNG + CSS + JSON zip, or the sliced frames

## Features

- Compact bin packing, grid, row or column layouts
- CSS classes with background-position and a JSON coordinate map
- @2x retina sprites with background-size handling
- Preview HTML included; class names generated from file names
- Slice sheets by grid or cell size and skip empty cells

## FAQ

### How do I use the generated CSS?

Put sprite.png and sprite.css in the same folder, include the stylesheet and give an element both the base class and the icon class, for example <i class="icon icon-home"></i>. Class names come from file names, and the prefix can be changed in the options.

### What does the @2x option do?

If your icons were drawn at double size, enable it to get a normal-size sprite.png plus a sharp sprite@2x.png. The CSS switches to the @2x image on Retina and other high-DPI screens while keeping the same display size.

### Are my files uploaded to a server?

No. Everything runs locally in your browser via WebAssembly. Files never leave your computer and are discarded when you close the page.

### Do I need to sign up or pay?

No. The site is completely free, requires no account, has no usage limits and adds no watermarks.

## Related tools

- [PDF to Image](https://qilingtools.com/en/pdf/to-image): Free online PDF to image converter: render every page as a high-resolution JPG or PNG at 72/150/300 DPI, download all as a ZIP. Processed locally, no upload.
- [Image to PDF](https://qilingtools.com/en/pdf/from-image): Free online image to PDF converter: combine JPG, PNG and WebP images into one PDF in order, with A4 or image-sized pages. Processed locally, no upload.
- [Compress Image](https://qilingtools.com/en/image/compress): Free online image compressor: batch compress JPG, PNG and WebP with adjustable quality and a max size, showing the before and after sizes. Runs locally.
- [Resize Image](https://qilingtools.com/en/image/resize): Free online image resizer: batch resize by pixel width and height or by percentage with the aspect ratio locked. JPG, PNG and WebP, processed locally.
- [Convert Image](https://qilingtools.com/en/image/convert): Free online image converter: batch convert JPG, PNG, WebP, GIF and BMP images to JPG, PNG or WebP. Processed locally, no upload.
- [Watermark Image](https://qilingtools.com/en/image/watermark): Free online image watermark tool: batch add text watermarks with position, tiling, opacity, size and color settings. Processed locally, no upload.
- [Stitch Images](https://qilingtools.com/en/image/stitch): Free online image stitcher: join screenshots or photos vertically or horizontally into one long image, with gap and background options. Processed locally.
- [Remove Background](https://qilingtools.com/en/image/remove-bg): Free online background remover: AI finds people, products and animals and cuts the background to a transparent PNG, or swaps in a white, red or blue backdrop.