Developer Tools · Free generator

CSS Sprite Sheet Generator

Free · no sign-up Live preview · copy or download the CSS

Ten icons, one request. Load your images, pack them into a single horizontal sheet on a canvas, download the PNG, and copy the background-position CSS that addresses each icon.

Settings

No icons loaded yet.

Generated CSS — updates live


The CSS you need to build this yourself
Understand the output, not just copy it — these lessons on our learning path teach exactly what this tool automates:
STEP 1 · 20 minCSS Backgroundsbackground-position — the addressing mechanism.STEP 2 · 20 minThe CSS Box ModelThe fixed-size icon window.STEP 3 · 20 minCSS Performance & Best PracticesRequests, caching, and when sprites win.


  1. Base64 Image Encoder for CSSDeveloper Tools
  2. CSS Minifier & FormatterDeveloper Tools
  3. CSS Pattern GeneratorBackgrounds & Color
  4. CSS Noise Texture GeneratorBackgrounds & Color
  5. CSS Border Radius GeneratorShape & Layout
  6. CSS Clip-Path GeneratorShape & Layout


How it works


A sprite sheet is many images shipped as one: every icon lives at a known offset in a single file, and each element shows its icon by setting the shared sheet as background and shifting background-position by negative offsets. This tool packs your uploads on a canvas, exports the PNG, and derives a class per icon named after its filename.


The wins: one cacheable request instead of N, and every icon available the instant the sheet loads — no per-icon pop-in. Modern HTTP reduced the request penalty, and SVG symbol sprites now cover vector icons, but bitmap sprites remain the right call for pixel art, emoji sets and game assets — and remain the classic teaching case for background positioning.


Run the code — try it yourself
This mini-sheet is drawn with a gradient standing in for sprite.png. Change which "icon" shows by adjusting the negative background-position in steps of 40px.


exercise.html — editable


Frequently asked questions
Are my images uploaded anywhere?
No — the sheet is assembled on an HTML canvas in your tab and downloaded straight from it.
Why negative background-position values?
You're sliding the big sheet leftward/upward behind a small window; negative offsets bring the right cell into view.
My icons look squashed.
Everything is normalized into square cells; pad non-square sources to squares first, or match the cell size to your icons' native size.
Sprites vs Base64 inlining?
Both cut requests. Sprites keep one cacheable image for many icons; Base64 fuses tiny assets into the CSS itself. Many icons → sprite; one or two tiny ones → inline.


Keep going
Sprites made background-position famous, and the mental model — one big image, a small sliding window — shows up everywhere from parallax to image reveals. Round out the request-diet trio with the Base64 encoder and Minifier, with the theory in Performance.
CSSmatic is a non-profit project, made by developers for developers.