Canvas: CSS Sprites Generator

English
正體中文

Build your own CSS Sprites with `<canvas>`.

[Info] To Opera and Webkit users: you can play with this tool but you won't be able to save the composed image due to lack of "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.

This tool is made by Tim Chien. You can contact me or leave your comments.

Flickr photo by Kelsey Shay, CC-by-sa-2.0.

Spacing

Horizontal Image Spacing

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.

Vertial Image Spacing

Colors

Background color

Transparent

Spacing color

Transparent

One at a time

Copy and paste URL of the image, one at a time. For security reason, you cannot access local image from here.

Be greedy

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

Predefined sets

favicons - favicons from various websites. wordpress: http://www.wordpress.org/favicon.ico wordpress-com: http://www.wordpress.com/favicon.ico facebook: http://www.facebook.com/favicon.ico twitter: http://twitter.com/favicon.ico anobii: http://www.anobii.com/favicon.ico flickr: http://www.flickr.com/favicon.ico netvibes: http://www.netvibes.com/favicon.ico plurk: http://www.plurk.com/favicon.ico
Mozilla zoo - Logos from Mozilla applications. firefox: http://www.mozilla.org/images/product-firefox-50.png thunderbird: http://www.mozilla.org/images/product-thunderbird-50.png sunbird: http://www.mozilla.org/images/sunbird_logo-50.png camino: http://www.mozilla.org/images/product-camino.png fennec: http://www.mozilla.org/images/fennec.png
Data URL - Add an image using data: url. red-dot: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IAAAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1JREFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jqch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0vr4MkhoXe0rZigAAAABJRU5ErkJggg== check: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC

[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

Firefox users can right click the <canvas> element on the right to save the image.

CSS

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

Data

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