Image Sprite Sheet Generator
Combines many small images (icons, UI states, character frames) into one downloadable PNG and emits a CSS block that places each by `background-position`. Reduces HTTP requests when an icon font, an SVG sprite or an actual sprite-sheet pipeline isn't an option. Layout is horizontal strip, vertical strip, or a fixed-column grid; the sheet is sized to fit the largest item in each row or column. Files are processed entirely client-side via canvas — your icons never leave the browser.
How to use
- Drop or pick the images. They appear in the order the OS hands them over.
- Pick layout: horizontal/vertical strips are simplest, grid is denser. Set padding to avoid bleed.
- Download the PNG, copy the CSS, ship them together — match the class name you put in the CSS prefix.
Frequently asked questions
- Sprite sheets vs. SVG sprites vs. icon fonts?
- PNG sprites still win when the source is a real raster (game art, photo thumbnails). For UI iconography prefer SVG sprites (`<symbol>` + `<use>`) — they scale and respond to currentColor. Icon fonts are mostly a legacy fallback now.
- What happens to transparency?
- If you keep the background transparent, the PNG is saved with alpha (the checkerboard you see in the preview is just to make the transparent area visible). If you pick white or black, those are baked into the sheet.
Related tools
Image Duotone Effect
Apply a two-color duotone effect to any image — pick a shadow color and a highlight color, adjust midpoint and contrast, download the result. Spotify-style covers in two clicks.
Image Blur
Apply Gaussian, box, or motion blur to any image directly in your browser. Adjustable radius 0-64 px, with the equivalent CSS filter string for copy-paste.
CSS Filter Playground
Visually compose blur, brightness, contrast, hue, sepia, invert, and more — copy the CSS filter or Tailwind arbitrary value.
Image → ASCII Art
Convert any image to ASCII art with adjustable width, character set, and inversion — all in your browser.
Lorem Picsum URL Builder
Build placeholder image URLs from picsum.photos — set dimensions, grayscale, blur, a seed for stable images, or a specific image ID.
Image Pixelate
Drop an image and pixelate it to any block size — block-perfect output you can use to censor a screenshot or build retro art.