Donaldson R F Sprite Sheet Generator
Combine icons, game frames or small images into a single sprite sheet — with the CSS and JSON coordinates to use it.
Click to choose images or drag and drop them here (PNG, JPG, GIF, WebP, SVG…)
Why use a sprite sheet?
One image file instead of dozens means fewer requests and faster page loads, and in games or animations a single texture is cheaper to draw. In the CSS output every image becomes a class with its own width, height and background-position — use <span class="sprite sprite-name"></span> to show one. The grid layout gives every image an equal cell (easiest to animate frame by frame); packed rows keep the sheet smaller when the images differ in size. The padding stops neighbouring images from bleeding into each other when scaled. The JSON lists each frame's x, y, width and height in pixels.