• X

    9 Free Online CSS Sprite Generator

    By in Interesting link

    Bluehost hosting

    We have already discussed about How to use CSS sprites and How to add image hover effect using CSS sprites. Both the tutorial requires manual work and now this time, I’m going to share some online CSS sprite generator which will help you to generate CSS sprites online.

    Few days back we let you know about Google started ranking website based on speed and its high time for all the bloggers and website developers that we should optimize our site for speed as much as possible. One of the simplest way to optimize your WordPress blog is by using super cache plugin, Smush.it plugin and using CSS sprites.

    Why do we need online Sprite generator?

    Anyone, who have a website and you are serious about it, CSS sprites will be very useful for faster loading of your site. We have already shared how to create CSS sprites manually, but everyone is not as good in coding and in such cases these online CSS Sprite generator tool, will be very handy to create sprites quickly.

    Advantages & disadvantages of using CSS sprites Generator:

    The IDEA behind CSS sprites is very genius. For those who does not know about CSS sprites , CSS sprites group multiple images into one big image and display them using CSS background positioning. This helps in decreasing no. of concurrent connections and your site will be faster:

    • A single big image uses less bandwidth as compare to various smaller ones.
    • Less images ==Less http requests = faster loading overall

    The only disadvantage of using CSS sprites is that it  does not work consistently in all browsers like IE and Opera,Chrome and Firefox are more close to the standards. Though, if you don’t care about outdated IE browsers, you need not need to worry much. A bit of CSS tweak can make your complete code cross-browser compatible.

    Useful list of online CSS sprite generator:


    css sprites 9 Free Online CSS Sprite Generator

    Website Performace CSS Sprite Generator

    This is best of all Online and Offline CSS Sprite Generator. It lets you upload images, ignore duplicate images, resize images, output images option etc. <Link>

    Data URI Sprites

    Data URI 9 Free Online CSS Sprite Generator

    Duris.ru is a multi-purpose tool for Web-designers. It offers multiple features like Image compression, Image optimization, Compress or merge Js, Compress or merge CSS. <link>

    Drupal CSS Sprites Generator Module

    This is fairly simple but powerful online CSS Sprites generator tool, lets you to create simple CSS Sprites Images

    CSS Sprite Generator

    This tool allows you to upload multiple files and generate a sprite out of them. It also gives you the CSS code (the background-position value) for each image in the sprite.

    csssprites 300x56 9 Free Online CSS Sprite Generator css sprites

    Projekt Fondue CSS Sprite Generator

    This generator lets you ignore duplicate images, resize source images, define horizontal and vertical offset, define background and transparency color, assign CSS class prefixes and various other things.

    Sprite Creator 1.0

    This tool allows you to upload an image and create the CSS code for selected areas of the sprite.

    SpriteMe : One click CSS sprite generator

    Sprite me 9 Free Online CSS Sprite Generator
    When invoked, SpriteMe automatically identifies potential images to be grouped into a sprite, gives you one-click sprite creation through csscoolrunnings.com and re-inserts the new sprite into your site on the fly for testing.

    All of these web generators are equally efficient with easy to use interface, I recommend you to must try creating sprites for your site. If you create one then please share.

    Do let us know which Sprite generator site are you using to create CSS sprite online?  Are you using CSS sprites into your website to optimize your blog for speed?

    Subscribe to Download WordPress Guide Worth $99

    Discover more awesome articles

    Article by

    ishan has written 2 articles.

    If you like This post, you can follow ShoutMeLoud on Twitter. Subscribe to Blogging tips via RSS or EMAIL to receive instant updates.

    { 12 comments… read them below or add one }

    Mani Viswanathan

    This will work gr8, also after that don’t forget to Smush it! :-)


    jai prakash

    Online css generator nice .Now my work will be easy.great hidden post.



    No dude i’m not using it in my blog bec i’m a designer :)


    Shabnam Sultan

    I will try using these online CSS generators on my blog.


    Suresh Khanal

    This is totally new concept for me. After reading your post I started to think

    “Does it justify to use sprite which is not consistent to different browsers just for the sake of a bit speed improvement of blog?”

    Would you suggest honestly? (I understand the services are great, no doubt)



    [1]Percentage of people using IE or opera is very less …and the percentage decreases if you have a tech blog.
    [2]Sprites are beneficial for blog such as shoutmeloud with large traffic…It could decrease bandwidth …..
    [3]and good for seo.

    Depending upon which factor is significant in your case ,you can choose whether to choose sprites or not


    Vikram Rout

    Very Nice information about Online Css generator. I am using in my blog site. Thanks for sharing this information



    Spriteme isn’t opening, looks like its down. Can anyone confirm this?


    Jeff Carter

    Here is another good one:




    Spriteme is good.Thanks for the list.


    Jorge Bastida

    Try this one too http://gluecss.com


    John Knauber

    I like this one a lot:

    You can generate sprites by entering a website URL and it will take images from CSS and IMG tags to generate a sprite for you. Of course you can also just upload images if you wish, but it’s 100% free. I use it all the time.


    Leave a Comment

    Previous post:

    Next post: