Canvas: CSS Sprites Generator

Build your own CSS Sprites with <canvas>.

[Info] To Opera and Webkit users: Depend on your browser version, you might not be able to save the canvas image since there are no "Save As..." command in the context menu.

This tool can help you make CSS Sprites with <canvas> support in browsers. As a web designer/developer, your browser should support canvas. Consider quit your job if it doesn't.

For more information about CSS Sprites, please read this article from CSS tricks.

The tool generates result on the fly. Feel free to switch between tabs when making your sprite image.


px Make sure horiontal spacing is large enough to aviod Safari image repeating bug, if you wish to use the sprite image for CSSes other than privided.



[Info] Your browser doesn't support reading local files.

One at a time

Copy and paste URL of the image, one at a time.


Be greedy

Paste URLs on the textbox below, in the form of
my-class: http://.../.


Local image

Select file from below and it will be converted into a Data URL and inserted above.

Predefined sets

  • favicons - favicons from various websites.
  • Mozilla zoo - Logos from Mozilla applications.
  • Data URL - Add an image using data: url.

[Alert] You have not yet add any image.

  • Drag the images to sort, double click to delete.
  • You may also resize the sprite image. Width is restricted to 2042px to avoid Opera bug.

[Alert] You have not yet add any image.

Sprite Image

Please right click the <canvas> element on the right to save the image.



You should now be able to use any class as images, like <span class="sprite my-class">my icon</span>



Save this text chunk to re-use image list with this tool (paste it into "Be greedy" section).