Our next WebDev Tool!

The easiest way to create your CSS sprites

With SpritePad you can create your CSS sprites within minutes seconds. Simply drag & drop your images and have them immediately available as one PNG sprite + CSS code. No fiddling in Photoshop, no manual assignment of CSS styles.

SpritePad is your web application for creating css spritemaps
Get started It's free!

SpritePad is lightning fast

Optimized for speeeeed: No download, no setup, no long-winded uploads. SpritePad works hassle-free directly in your browser, just drag & drop your images and you can immediately work with them to create your unique CSS sprites.

Start SpritePad now
Drag & Drop Images to create your CSS Spritemap

Let SpritePad create the CSS for you

Every time you add an image, SpritePad creates a CSS code snippet. Move your images around, change options and let the CSS styles get updated automatically. No need to do work twice. CSS sprites the easy way.

Launch SpritePad, it’s free
SpritePad generates your CSS code on the fly

Save even more time with automatic alignment

Sometimes creating the perfect sprite is like a jigsaw puzzle. That’s why we integrated auto-alignment. Just click on the button and all your images get aligned automatically, saving as much space as possible. Simply magic!

Try SpritePad now

Auto-alignment is exclusively available in our premium version.

SpritePad can automatically align your sprites to make optimal use of space

Work wherever and whenever you want

Download, load and save your CSS sprites at any time. SpritePad works in every modern browser. Register and store your CSS sprites as editable versions online in our cloud.

Try SpritePad now

The free version allows you to store up to two CSS sprites. Invite friends or become a premium user to store even more sprites.

Have your data available and work with it wherever you are.

Collaborate with friends and colleagues

If you’re working with others, it’s important to share all resources within the team. Connect your SpritePad account to as many people as you like. Collaboration made simple.

Let SpritePad assist you

Team collaboration is currently only available for our premium users.

Share your documents and work together.

As easy as writing emails

Rulers, guides, backround grid, magnetic alignment, smart document fitting and many more little helpers will assist you to easily create your CSS sprites.

Get started It's free!

Any feature in mind that’s currently missing? Don’t hesitate to contact us!

SpritePad has many useful functions for helping you build your css spritemap Use "fit document" to auto-resize your CSS spritemaps Use the SpritePad Rulers to measure the locations of your css sprites Use the SpritePad guides to align your sprites in your css spritemaps