Grow your CSS skills. Land your dream job.

Show Off Your Sprites!

Published by Chris Coyier

I just updated my old CSS Sprites article yesterday, and I thought it would be kind of fun to ask everyone to share sprites that they have created themselves. Let's make a quick giveaway out of it too!

I've finished my copy of Dan Cederholm's Handcrafted CSS, which was very good. My copy is now of course slightly used, but I figured why not pass it on to someone else who can learn from it. It's the version that comes with the DVD video as well. I'll choose one random person to send it to.

To enter, just leave a link in the comments below directly linking to your sprite image. If you have never created a sprite, find an interesting one on the web and link directly to that. Make sure to leave your real email when commenting so I can contact you if you win. I'll select a winner next week.

If you are thinking you are going to try and find a sprite elsewhere, but don't know how, I'd suggest using Firebug. Pop it open and mouse around things on the site, trying to find things that use background images. Hover over the URL path to the background image and see if there is more than meets the eye going on. This is one of mine looks like in Firebug:


  1. The Facebook Sprite. Everything in one place ;)

  2. When does this contest end?
    I’m working on a new site now which I plan to use sprites in. I mean, to the level where I will only have on image on the whole site which I would love to use for this.
    The site should be ready tomorrow evening.

  3. I have one right here.

    Still not finished, working on it :)

  4. Google has a good sprite –

  5. Permalink to comment#

    Chris- I followed your screencasts to make this WP site from scratch (using Starkers)

    I had never done sprite images either, so this was also a first.

    (I want to comment here about what a brilliant artist, illustrator and political commentator Steve is, but I guess that is not what this is about)
    Normally I like using html for the nav, but in giving Steve a unique design, I wanted to use his lettering.
    PS I hope you are very happy today after Favre/Vikes did not win but your beloved Pack did.

  6. Catalin
    Permalink to comment#

    Dragon interactive navigation sprite:

  7. Permalink to comment#

    Not an image but a pretty good on-line tool for creating them.

    • Permalink to comment#

      That is pretty cool. I have always just hand built them and then did a little trial and error.

    • Permalink to comment#

      Try using that on… 6 requests and 77k saved, and the resulting sprite is very impressive…

  8. Here is one of my own for an old design I had:

  9. Permalink to comment#

    INSight Design Conference Nav Sprite:

  10. Permalink to comment#

    This is a small sprite for my social media links on my portfolio website.

  11. Guillaume
    Permalink to comment#

    I’m not entering the contest with this, but
    jQuery UI ThemeRoller sprite is really nice.

  12. Permalink to comment#

    Amazon used to have a more intense sprite than this, I thought, but it’s still pretty nice!

  13. This sprite from Yahoo is pretty impressive:

  14. Permalink to comment#

    Hey from the west coast. Here’s my personal portfolio. Just started using sprites as of yesterday for my dynamic dropdown navigation. Loads 7x faster… Amazing.. I didn’t even know what a Sprite was until I read your article. Thanks. :)

  15. Mine’s at which does the tabs for It uses a mix of repeating and non-repeating parts to do the tabbed navigation over a simple UL.

  16. my navbar uses sprites.


    Yes, it’s mine. It’s not 100% of the site though.
    I’m not working for the company anymore though.

  18. Permalink to comment#

    Yahoo! India
    Yahoo! Shopping

    It looks like all Yahoo!’s sites use sprites…

  19. Permalink to comment#

    It belongs to apple but thats where I first learnt about the concept.

  20. Permalink to comment#

    I use several sprites on my website. This is a cool one with a “hover” state and 3 buttons:

    Nice going Chris!

  21. Dungol
    Permalink to comment#
  22. Here’s one of mine for all of the misc icons on my site:

  23. Jesse
    Permalink to comment#
  24. Permalink to comment#

    A good sprite from Warhammer Online website:

    • Liam Goodacre
      Permalink to comment#

      That’s a bit much isn’t it, it could be 2/5’s of the size.

  25. Permalink to comment#

    Here is the sprite I made for

  26. Permalink to comment#

    My blog header at Anime² uses a sprite. (Our tagline is ‘we love maids’, and we actually belong to the ani-blogosphere rather then the design-o-blogosphere, so don’t wonder, that explains our mascot ^^ )

  27. Permalink to comment#

    This one is from SAPO Homepage used in backgrounds.

  28. Permalink to comment#

    Whoops that was the wrong image [above].
    Here it is:

  29. Tutorial9 Has a neat sprite for their navigation

    CSS-Tricks has an awesome sprite

    Chris Spooner’s sprite covers a few subscribing methods and miscellaneous items.

    And last, Apple’s navigation sprite

    • I’m sorry my previous comment looks like a list of links with a poorly descriptive title, but there isn’t an easy way to make a list to a couple sprite images interesting.

  30. Made this one for the stadium overview of our supporterspage a while ago:

    Used on


    not mine but this megaman sprite has to be one of the best ever. you can see it in play here.

    megaman ftw!

  32. Here are three image sprites of two websites I’m working on right now, the sites are not live yet though:


  33. Not the most exciting but in the interest of winning, here is one I’ve used for a site…

  34. Grant Z
    Permalink to comment#

    Here’s mine: A sprite i made for a wordpress site at the library I work for.

  35. Permalink to comment#

    OBEY YOUR THIRST! – Sprite

  36. Permalink to comment#

    Here’s one of my little ones off of my portfolio website:

  37. euan
    Permalink to comment#

    Myspace Search Sprite

    A lot there.

  38. Mary H.
    Permalink to comment#

    Here’s a simple one I’m using on a site (still in development):

  39. Permalink to comment#

    I haven’t used CSS sprites that much, but here are the ones that I use for a few icons.

  40. has a nice little animation at the frontpage.

  41. Great idea.

    Here’s mine:

    I’m looking forward to seeing a good list here.

  42. Permalink to comment#

    First (and only so far) attempt at sprites for a new blog design I’m working on:

    Haven’t tried anything as complex as the Facebook sprite, but it would be interesting to try on an upcoming project

  43. Permalink to comment#

    This is the sprite I created for a Javascript countdown timer, it worked so well!

  44. I’ve got two:

    Both are my own, the first one is in the process of launching and the second is on a site already live.

  45. Permalink to comment#

    From my (outdated) blog-design:

    Notice the easter egg I made just for curious users! ;)

  46. Here is one that I made for Svensk Handel

    I would love to get that book!

  47. Alex
    Permalink to comment#

    There is a nice one here. Not mine though.

  48. Navigation for a spec site we are still working on.

  49. Permalink to comment#

    From Jquery Theme Roller:

    Themeroller Sprite

    One small one I did for a website:

  50. Here’s a download one I made, it’s pretty innocent but gets the job done.

  51. Permalink to comment#

    I picked up on sprites by reading this blog. Here’s a simple sprite image to create a neat button effect:

  52. Permalink to comment#

    I created several of them for this client:

  53. simto77
    Permalink to comment#

    My first CSS sprite:

  54. simto77
    Permalink to comment#
  55. This one is used in the footer of a live site of mine for Smoke & Spice Southern Barbeque in Ontario Canada!

    It’s not a terribly involved sprite, but it’s all mine…LOL.

    To use a term of Chris’, this sprite is “gridular”, in that I kept the transition pics aligned so there was less to change in the CSS.

  56. I used a sprite for the jQuery sliding carousel in the footer of Here’s the sprite image:

  57. Kyle
    Permalink to comment#

    My favorite sprites:

    Mobile Me, Electronic Arts, and Fantasy Interactive.

  58. webbografico
    Permalink to comment#

    Here’s the one from the main navigation:

  59. Permalink to comment#

    Here is a sprite I set up for a navigation design:

    You can try it out here, on the right:

  60. Permalink to comment#

    My website is curently under construction, but I was interested to join this contest. I have one sprite, please check this out

    BTW, I’m apologize, my english is not so good xD

  61. Permalink to comment#

    I use a pretty simple sprite of all icons over my site:

  62. Permalink to comment#

    I set up a site that uses 2 sprites for top and left column navigation. I’ll combine them after reading this article:


  63. Matt
    Permalink to comment#

    Here’s one from [H]ard|OCP

  64. Google:

    And one I made for an client of mine:

    Site is in dutch by the way :)

    My own site does not use sprites at the moment, but i plan to use for the next version.

  65. Permalink to comment#

    That’s awesome, I had never thought to look.

  66. Permalink to comment#

    I just updated the css of my 80s/90s blog Saturday Morning Central, so it might be one of the more colorful/obnoxious sprites in the contest. :)

  67. Permalink to comment#

    Love this one from Tim Van Damme’s website:

  68. Dang, I feel like I am way behind in commenting on this one!

    Here is the sprite I use for DesignBump:

    I am trying to continually add images to it to improve the sites performance.

    I also really like the one that uses:

  69. Colin
    Permalink to comment#
  70. Andrea
    Permalink to comment#

    Hey Chris,

    keep up with your good work…

  71. A couple I’ve done recently:

    If I ever use image replacement for a nav bar, I always use a single image, but ‘ve only taken that a step further to include more site images a couple of times but will be making use of to do so more in the future.

  72. Permalink to comment#

    I used sprites in the menu of a site I’m working on for a college jiu jitsu club. Thanks for the great podcast…that where I learned it.

  73. Definitively not the best, but here’s mine. From my portfolio,, used for the icons.

  74. Chris Muench
    Permalink to comment#

    this is one i used on a site i did for LogicBUY.

    i used more on the site, but that is the main one.

  75. David K.
    Permalink to comment#

    I got quite large one, for a site with furniture eshop

    And main sprite is here, there are 2 more but small ones

    All handcrafted, no generator used.

  76. Permalink to comment#

    Uhm… can I post this one?


  77. webbografico
    Permalink to comment#

    this is one from the main nav of

  78. Permalink to comment#

    Sadly I haven’t made my own yet, only read your article yesterday with tutorial so still working on it.

    However, I admired this one about a year or so ago and thought it was a great idea, so I’ll share this instead:

  79. Permalink to comment#

    Ooo yea Sprite it up YO!

    This is from my photography agency me and my buddies did, but I did the website and they took pictures


  80. George
    Permalink to comment#

    The best site that you can see sprites on is which makes it very fast although it has a lot of contents.

  81. Here’s one I did for the nav on a client site. The text on the left is white, so it looks odd on a white background:

  82. Permalink to comment#

    I did one for a Splash Page. Oh yes, a Splash Page. The boss insisted on it, and well, he was the one to pay.

    There you are:

  83. Wow, awesome prize! Great idea.

    The most impressive sprite I’ve seen is the one in use on Florida Flourish.

    It can be seen here and is a whopping 1043x697px

  84. Mark Sinkinson
    Permalink to comment#
  85. leo rapirap
    Permalink to comment#

    never tried CSS sprites before BUT will definitely study, learn and use it sometime in my future projects.

  86. David Powell
    Permalink to comment#

    I use two for the artist site I made one for his top menu and one for his main menu:

    the top menu is non-active and hover state only:

    the side menu has non-active, hover, and active (active is white)

  87. Darren
    Permalink to comment#

    Great tip, Definately like this method.

    Found these from

  88. Sprites were used for the nav of this portfolio site I did recently:

  89. Sprites were used for the twitter and RSS links in the footer.

  90. Eric
    Permalink to comment#

    Here is my very first one, created following your guide Chris!


  91. dp
    Permalink to comment#

    sigh, i’ve no personal chops to showcase, but i did realize they are put to handy use in a site that i stare at day in and day out. any /. fans recognize this? those of course would be the category icons for individual posts.

  92. Permalink to comment#

    Useful link icons:

    CSS on site.

  93. Dawid
    Permalink to comment#

    Actually it’s only menu. But I used this 5 years ago. Long time before all this “sprite madness” :)

  94. Hope nobody said this one yet, but I found this one on BlackMoon Designs website.

  95. Matthew Webb
    Permalink to comment#

    Quite a cool sprite, even if I do say so myself. Although the accompanying website is not my finest hour.

  96. This sprite I found at Its a very long vertical sprite

    Other than that I found this CSS sprite used to create an awesome hover effect on the menu. I found about this sprite long back on CSS-Tricks forums only. This one belongs to and the sprite is

    And in the end my very first CSS sprite :)

  97. Jay Welsh
    Permalink to comment#

    Hi Chris,
    I thought the sprites Apple uses for and are really detailed and interesting, it just shows how much Apple really care about usability and design.

    Here they are: Sprite Sprite

  98. Permalink to comment#

    This is also a little sprite, but famous?

  99. Permalink to comment#

    I didn’t relise people used sprites like this, I’ve only used them for buttons for hover and active states. It make sence though because there’s fewer requests from te server so I guess the pages would load quicker.

  100. I got two really nice ones that I use for my main site layout. I take big pride in my sprites, lol.

  101. Permalink to comment#

    Site a bit broken in non standards browsers right now :(

  102. Permalink to comment#

    mine is simple, but it is my fav I’ve ever used. gives my links a real water effect:

    in action:

  103. Taeo
    Permalink to comment#

    Nothing special about the simplicity of the sprite itself, but the implementation and browser compatibility of this made me proud.

    The implementation which took some tinkering for IE6 issues with z-indexing & trns png issues

    Side note about sprites from my perspective…

    They can be great when used properly. They limit connections / downloads and can reduce page load time and need for pre-loading (and we’re all proud of these pixel-perfect creations).

    The hype about using them can be greatly misunderstood and implemented poorly for the sake of using “sprites”

    Consider the implementation, usage and cost benefit of your solution before implementing in production. But have a great time exploring the possibilities.

    Apologies for the best-practices speech. I feel it’s critical to think about why you’re doing something when learning to do it.

  104. Permalink to comment#

    I use sprites for navigation as well, on this site I created for a myth rock band;

  105. Permalink to comment#

    I made this one (with white background)

  106. Mine is pretty simple:

    i also have a parallax, if you grab the lower right hand corner and re-size back and forth the page tears in the header move.


    Effect looks awesome when the image is slowly faded in instead of immediately replacing the first image.

  108. Permalink to comment#

    I just made one for a WordPress site here.

    Thanks Chris.


  109. Marta
    Permalink to comment#

    I have made a few, but they’re all very basic, not really interesting (most of them follow the classic scheme – all elements of the menu in three different states, as simple as that). However, I found this the other day, I’d call it “Sprite Madness” or something like that…:

    Found here, this image is part of a tool that allows you to create css sprites based on the Fugue icon set. This is icon overdose at first sight – but kinda useful anyway :)

  110. Permalink to comment#

    Seems I’m late to the party. But I made one for my friend’s domino site. He coded it all in javascript.


    Domino game:

  111. and use this . It’s BIG :)

  112. Permalink to comment#

    I’m in google Reader all day, so this was an obvious one for me:

    I’ve thought about it for my own site (; yes, ugly as hell; I’m not a designer, but I’m self-teaching myself about css, php, etc), but I don’t have that many background images, so it didn’t make sense to do so.

  113. Permalink to comment#

    Here is a link to my css-sprite

    Pretty simple, but so is the site :)

  114. Permalink to comment#

    Simple sprite i try for my blog… next – prev navigation…


  115. Permalink to comment#


    I used a simple sprite for my main navigation on my portfolio:

  116. Jorge
    Permalink to comment#
  117. Bryce
    Permalink to comment#

    I was doing an urban art project and needed a graffiti style font for the main navigation;

    Urban Art Sprite

  118. Haha :) This seems fun :)

    Here is a sprite that I created for a tutorial I wrote a while back.

  119. Permalink to comment#

    At we have a big one, but it’s still very light compared to all the images separated…

  120. I’m making a JavaScript Minesweeper at the moment – here’s my sprite:

  121. My site navigation uses sprites.

  122. Heme
    Permalink to comment#

    Picasa has a pretty crazy sprite:

  123. Davis
    Permalink to comment#

    Since I have never created a sprite myself, I would borrow one from the search giant :)

    Btw, would you be able to ship the book to India?

  124. visaap
    Permalink to comment#

    Since a month or so I’ve been working on sprites for the company I work for. It gives a fantastic feeling when a site launches and allmost every image used on the site is in a sprite :)
    Here is one of them used for

  125. John
    Permalink to comment#
  126. Permalink to comment#

    I did this sprite about a year ago. Approx. 50 HTTP requests reduced to 1 (~80 KB)

  127. Eliazer
    Permalink to comment#
  128. Ruana V
    Permalink to comment#

    I’m an aspiring (an not yet earning) female webdesigner from Austria, Europe. I regulary read your Blog, Chris, and also articles written by Dan (love Simple Bits).

    Therefore I’m certain that this book would be of great use to me! There are not enough women out there doing this job – not by far – and even less who are located in Austria (and if so many would have a hard time reading a book written in English). I hope u choose to support “us” (me that is ;-)).

    Love, Ruana

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".