Canvas: CSS Sprites Generator

English
正體中文

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.

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

More stuff:

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

[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. wordpress: https://www.wordpress.org/favicon.ico wordpress-com: https://www.wordpress.com/favicon.ico facebook: https://www.facebook.com/favicon.ico twitter: https://twitter.com/favicon.ico anobii: https://www.anobii.com/favicon.ico flickr: https://www.flickr.com/favicon.ico netvibes: https://www.netvibes.com/favicon.ico plurk: https://www.plurk.com/favicon.ico
Mozilla zoo - Logos from Mozilla applications. firefox: https://www.mozilla.org/images/product-firefox-50.png thunderbird: https://www.mozilla.org/images/product-thunderbird-50.png sunbird: https://www.mozilla.org/images/sunbird_logo-50.png camino: https://www.mozilla.org/images/product-camino.png fennec: https://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

Please 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).