30 Free Fading Background Images

February 1, 2007 | Posted in Freebies | 86 Comments »

This is the first set and consists of a color fading to white. All fading background images in this set fade into white, so for the best results, you should set the CSS background color of your “body” to #FFFFFF.

These fading background images are intended to be used with your CSS in a repeat-x fashion. All files are in PNG format and are on average 4K in file size. This is only the first set. More to come. The next set will most likely be on black, but if you leave feedback, I will try to include exceptions. Background color is the biggest question. What is the most popular background color besides black and white? You, tell me.

Download All 30 in a Zip File (32K)

  • Fading Background 1
  • Fading Background 2
  • Fading Background 3
  • Fading Background 4
  • Fading Background 5
  • Fading Background 6
  • Fading Background 7
  • Fading Background 8
  • Fading Background 9
  • Fading Background 10
  • Fading Background 11
  • Fading Background 12
  • Fading Background 14
  • Fading Background 15
  • Fading Background 16
  • Fading Background 17
  • Fading Background 18
  • Fading Background 19
  • Fading Background 20
  • Fading Background 21
  • Fading Background 22
  • Fading Background 23
  • Fading Background 24
  • Fading Background 25
  • Fading Background 26
  • Fading Background 27
  • Fading Background 28
  • Fading Background 29
  • Fading Background 30

Download All 30 in a Zip File (32K)

I hope these fading backgrounds make your life a “bitt” easier. :)

This entry was posted on Thursday, February 1st, 2007 at 7:52 pm and is filed under Freebies. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Stumble It
Add to Del.icio.us

86 Responses to “30 Free Fading Background Images”

  1. Jits Feb 2, 07 at 5:08 am

    *and the crowd goes wild*

    :)

  2. Jits Feb 2, 07 at 6:28 pm

    PS: Any chance you could show us how to incorporate one of your rounded corners on one of these background images (with full CSS markup)? :D

  3. Brandon Hopkins Feb 8, 07 at 3:28 pm

    Awesome…I’ll be using one of these at my new site http://www.afterhimmedia.com

    Thanks!

  4. Stefan Waidele Feb 15, 07 at 2:14 am

    Why don’t you “fade to transparent”,
    and all backgrounds are taken care of?

  5. damo Feb 20, 07 at 3:53 pm

    some of the stuff i’ve seen on your site is amazing. amazing not because fo the work but because you give it away. a true gent.

  6. nagash Mar 20, 07 at 2:40 pm

    I dont get it…
    that’s just gradients, right?

  7. squiddle Apr 4, 07 at 8:32 am

    1. this are just gradients, how come you get attention at all? i really do not get it. maybe i should do a blog and bring breaking news like the earth is not flat in public opinion.
    2. what a bandwith waste. 1px width is enough for this.
    3. why not making a small tutorial or tool how you created those for all the webdesigners-with-no-clue-at-all

    content drives the web not neglectable stuff like this.
    buy something nice from the ad-revenue for this article
    @Stefan Waidele fading to transparent maybe more useful but without some extratricks the ie will luckily throw is intesticles in the face of your visitors. And nobody wants that.

  8. ejboy Apr 4, 07 at 11:48 am

    Please, make a free blank.gif !

  9. Mike Lane Apr 4, 07 at 8:50 pm

    Nice. Buuuuuuut…. You either need to use something else besides png or you need to look into gammaslamma. The problem with Adobe software is that it will apply the png gamma info incorrectly. Firefox ignores the gamma information; however, Safari and (of all things) Internet Explorer do not. That means that your pngs will be slightly lighter in Safari and IE6 than they are in Firefox. Apps like gammaslamma will remove the gamma chunk from the png file. That said, the gradient you used certainly does not have to be a png. You could avoid the whole mess and just use a jpg (or gif depending on the color depth requirements).

    The biggest problem isn’t that pngs appear differently from browser to browser, it is that pngs are different colors than colors used in HTML or CSS on a page. Take a look here to see what I mean.

    Here’s a link to a gallery where you can see the difference. In both images firefox is on the left, on the right is Safari. The top of the darkest gradient in firefox is #C5C5C5 and in Safari it is #CBCBCB. It’s a slight difference but it is noticeable. If, for instance, you’ve got a box that is adjacent to a png that uses HTML colors, you will definitely notice a difference in IE6 and Safari.

    PNG is nearly the perfect file format. Maybe someday it will actually be perfect. I hear that CS3 (at least photoshop, not sure about illustrator) will not have the same png gamma problem. I can’t wait to see if that’s true!

    All that said I like the gradients and my vote is 1) to use jpgs, and 2) to use base colors #444, #666, #888, #aaa, and #ccc.

  10. BittBox Apr 4, 07 at 9:27 pm

    I apologize If I’ve done wrong here, but this was one of my first posts. My expertise is in Illustrator/Photoshop/Flash.

    I appreciate all your comments, and Invite you to view my freebies archive. (mostly Vector Files)

    http://www.bittbox.com/category/freebies

    ~BittBox

  11. links for 2007-04-05 « My Weblog Apr 4, 07 at 9:37 pm

    [...] 30 Free Fading Background Images | BittBox (tags: css design) [...]

  12. Best of March 2007 | Smashing Magazine Apr 11, 07 at 9:06 am

    [...] 30 Free Fading Background Images This is the first set and consists of a color fading to white. All fading background images in this set fade into white, so for the best results, you should set the CSS background color of your ?body? to #FFFFFF. These fading background images are intended to be used with your CSS in a repeat-x fashion. All files are in PNG format and are on average 4K in file size. [...]

  13. ???????? ????????? Apr 11, 07 at 2:41 pm

    Nice

  14. webmaster Apr 15, 07 at 8:54 pm

    Thanks from http://www.noexcusebudget.com

  15. NewbieWebDev Apr 24, 07 at 7:13 am

    Hey pros, why would you care if this was available or not? I believe it’s intended for us newbies to get our feet wet to start making some nice pages … at no cost. You can always build a better mousetrap, but at least this is a nice way to start.

    And yes, content is the most important thing….. But try dressing up a swan with the feathers of a pigeon.

    Thx BittBox.

  16. Tony Apr 26, 07 at 12:58 pm

    Come on, folks…why are you complaining? The images are free, the article is free, the feed is free. If you don’t like it, feel free to not like it somewhere else.

    >> squidle wrote
    >> 2. what a bandwith waste. 1px width is enough for this.

    What squidle doesn’t seem to get is that some browsers have trouble rendering a full-screen 1px background that many times without chocking. It’s really better to have something that’s wider (like 25 or 50 px) than 1px.

    Content really IS king. I wonder why squidle didn’t post a URL for his/her own content-rich website?

  17. Amber Apr 26, 07 at 9:25 pm

    Thank you!

  18. tobto May 4, 07 at 7:17 am

    nice.. are there anybody who use Photoshop?
    ha-ha

  19. mimmo May 9, 07 at 10:24 am

    Yeah, thank you!

    About rounded corners, is load rounded images into table cells (or divs) the only way to obtain the wanted result?

  20. eburhan.com » Haz?r Web 2.0 Tasar?m Ara?lar? Jun 1, 07 at 12:44 am

    [...] ki yatay ?eritlere g?re g?z? daha az yoran renk ge?i?li arkaplanlardan kullanmak isterseniz Free Fading Background Images pakedini [...]

  21. » Haz?r Web 2.0 Tasar?m Ara?lar??a?an » Blog Archive Jun 5, 07 at 2:48 am

    [...] ki yatay ?eritlere g?re g?z? daha az yoran renk ge?i?li arkaplanlardan kullanmak isterseniz Free Fading Background Images pakedini [...]

  22. Haz?r Web 2.0 Tasar?m Ara?lar? « Tasar?m Manya?? Jun 6, 07 at 8:03 am

    [...] ki yatay ?eritlere g?re g?z? daha az yoran renk ge?i?li arkaplanlardan kullanmak isterseniz Free Fading Background Images pakedini [...]

  23. Haz?r Web 2.0 Tasar?m Ara?lar? Jun 8, 07 at 6:43 am

    [...] göre gözü daha az yoran renk geçi?li arkaplanlardan kullanmak isterseniz Free Fading Background Images pakedini [...]

  24. piracy! Jun 10, 07 at 9:32 am

    This site is amazing! You do such a great job on everything!

  25. Laydo.net Webmaster Blog » Blog Archive » Web 2.0 i?in ?e?itli ara?lar ve ac?klamalar Jun 18, 07 at 12:31 am

    [...] göre gözü daha az yoran renk geçi?li arkaplanlardan kullanmak isterseniz Free Fading Background Images pakedini [...]

  26. Creating a Faded Web Page Background Image » Ja Kel Daily Dot Com » Blog Archive Jun 24, 07 at 9:55 am

    [...] The process is really simple you just need the right code and then the image.? To create the image you will need Adobe Photoshop.? I know that not everyone will have this program so you can find 30 free images here. [...]

  27. Flux Jul 22, 07 at 2:55 am

    Thank you! This is help my for make design in my blog

  28. Laydo.net Webmaster Blog » Blog Archive » Haz?r Web 2.0 Araçlar? Jul 22, 07 at 10:12 pm

    [...] göre gözü daha az yoran renk geçi?li arkaplanlardan kullanmak isterseniz Free Fading Background Images pakedini [...]

  29. muzaffer Aug 10, 07 at 1:12 am

    “

  30. Barbara Aug 15, 07 at 9:59 am

    How lazy can someone be??? thanx!!!

  31. Anthony Sep 28, 07 at 12:56 pm

    Thank you so much! I was about to hire someone to do it for me cause I had no idea how those MSN guys did it. Now I can do it myself. Thanks again and God bless!

  32. Darlanne Oct 10, 07 at 5:49 pm

    Awesome freebies, thanks! :)

  33. David Hernandez Oct 23, 07 at 12:49 am

    Wonderful. I used it on my engraved gift sites http://www.cellphoneflasks.com and http://www.personalizedegifts.com

  34. Wikan Dec 16, 07 at 6:33 pm

    Great files, i used it on my technology news site http://www.beritanet.com. It was simply makes my life easier

  35. dizin Dec 25, 07 at 9:16 am

    very nice,thanks!

  36. Web 2.0 Tasar?m Araçlar? - Kisiselsayfam.com Dec 29, 07 at 7:24 am

    [...] ki yatay ?eritlere göre gözü daha az yoran renk geçi?li arkaplanlardan kullanmak isterseniz Free Fading Background Images pakedini indirebilirsiniz. 4. Yuvarlak kö?eli [...]

  37. Haz?r Web 2.0 Tasar?m Araçlar? | ManyakHost // Tasar?m Jan 1, 08 at 1:15 pm

    [...] göre gözü daha az yoran renk geçi?li arkaplanlardan kullanmak isterseniz Free Fading Background Images pakedini [...]

  38. :) Jan 5, 08 at 10:28 pm

    Nice, I like them all.. :)

    I think the next popular colour besides the white and black is blue?

    Thanks again for those backgrounds..

  39. Webmaster Rehberi » Blog Ar?ivi » Web 2.0 Tasar?m Araçlar? Jan 29, 08 at 9:44 am

    [...] ki yatay ?eritlere göre gözü daha az yoran renk geçi?li arkaplanlardan kullanmak isterseniz Free Fading Background Images pakedini indirebilirsiniz. 4. Yuvarlak kö?eli [...]

  40. Teknoloji Haberleri,Cep Telefon,Donan?m,Bilgisayar,Bilim » Blog Ar?ivi » Web 2.0 Tasar?m Araçlar? Feb 3, 08 at 3:12 pm

    [...] ki yatay ?eritlere göre gözü daha az yoran renk geçi?li arkaplanlardan kullanmak isterseniz Free Fading Background Images pakedini indirebilirsiniz. 4. Yuvarlak kö?eli [...]

  41. Arkakapak.net / S?n?f Dizisi » Haz?r Web 2.0 Tasar?m Araçlar? Feb 4, 08 at 4:58 am

    [...] ki yatay ?eritlere göre gözü daha az yoran renk geçi?li arkaplanlardan kullanmak isterseniz Free Fading Background Images pakedini [...]

  42. El ??leri Feb 14, 08 at 3:29 am

    Thanks A lot
    good job :)

  43. arizateam Feb 19, 08 at 6:46 am

    i think use this project on this site:
    http://www.arizateam.com

  44. Web Tasar?m Hakk?nda Her?ey…. » Blog Archive » Web 2.0 Tasar?m Araçlar? Mar 8, 08 at 6:41 am

    [...] ki yatay ?eritlere göre gözü daha az yoran renk geçi?li arkaplanlardan kullanmak isterseniz Free Fading Background Images pakedini indirebilirsiniz. 4. Yuvarlak kö?eli [...]

  45. Haz?r Web 2.0 Tasar?m Araçlar? | Mar 16, 08 at 8:02 am

    [...] göre gözü daha az yoran renk geçi?li arkaplanlardan kullanmak isterseniz Free Fading Background Images pakedini [...]

  46. Web 2.0 Tasar?m Araçlar? | Gelengeliyo.Com Mar 17, 08 at 7:05 am

    [...] ki yatay ?eritlere göre gözü daha az yoran renk geçi?li arkaplanlardan kullanmak isterseniz Free Fading Background Images pakedini indirebilirsiniz. 4. Yuvarlak kö?eli [...]

  47. Haz?r Web 2.0 Tasar?m Araçlar? - Programc?n?n günlü?ü! Mar 23, 08 at 3:11 pm

    [...] ki yatay ?eritlere göre gözü daha az yoran renk geçi?li arkaplanlardan kullanmak isterseniz Free Fading Background Images pakedini [...]

  48. Web 2.0 Araçlar? « Fikir-Siz’in Web Günlü?ü Apr 25, 08 at 2:26 pm

    [...] Free Fading Background Images [...]

  49. Hassan May 24, 08 at 11:32 am

    Thanks for this , but i want to use the Vista Aurora Fading Theme.

  50. gevv May 27, 08 at 7:29 am

    Thanks A lot

  51. Travesti May 31, 08 at 4:42 pm

    http://www.travestiler.biz Thanks

  52. Scott Jul 23, 08 at 10:13 pm

    Thant’s exactly what I needed! Thanks!

  53. umran Jul 28, 08 at 9:03 am

    Thanks.. WHY WHY WHY!!! Why dont speak english :((

  54. Web 2.0 Tasar?m Ara?lar? - BilgiYazar & Bilgi Yazar?z Aug 2, 08 at 4:17 pm

    [...] E?er ki yatay ?eritlere g?re g?z? daha az yoran renk ge?i?li arkaplanlardan kullanmak isterseniz Free Fading Background Images pakedini indirebilirsiniz. 4. Yuvarlak k??eli kutular Web 2.0 ile birlikte k??eleri yuvarlat?lm?? [...]

  55. Lorraine Aug 5, 08 at 7:05 pm

    Thank you so much, you’re very generous and thoughtful

  56. Ansiklopedik.Net » Blog Archive » Web 2.0 Tasar?m Araçlar? Aug 7, 08 at 10:33 pm

    [...] ki yatay ?eritlere göre gözü daha az yoran renk geçi?li arkaplanlardan kullanmak isterseniz Free Fading Background Images pakedini indirebilirsiniz. 4. Yuvarlak kö?eli [...]

  57. virtue Sep 28, 08 at 4:00 pm

    Dude you rock, thanks so much.

    Don’t sweat the haters. They have too much time on their hands.

    Get a hobby.

  58. No Xplode Reviews Oct 27, 08 at 4:19 am

    I think either that PNG with alpha opacity is not a wise thing, you will need pngfix in IE

  59. Flying Cart - The Blog :: Backgrounds - I love them Oct 30, 08 at 8:53 am

    [...] Fading Background Images [...]

  60. Berita Nov 4, 08 at 3:42 am

    Thanks! You are generous to share these cool backgrounds graphic . I use It on my new site http://www.berita.me

  61. vLkn // Webtasar?m & Grafik Tasar?m » Blog Archive » Web 2.0 Araçlar? Nov 19, 08 at 11:59 am

    [...] ki yatay ?eritlere göre gözü daha az yoran renk geçi?li arkaplanlardan kullanmak isterseniz Free Fading Background Images pakedini [...]

  62. Hamdi Kalayc? » Blog Archive » Web 2.0 Tasar?m Araçlar? Nov 22, 08 at 9:32 am

    [...] ki yatay ?eritlere göre gözü daha az yoran renk geçi?li arkaplanlardan kullanmak isterseniz Free Fading Background Images pakedini indirebilirsiniz. 4. Yuvarlak kö?eli kutular Web 2.0 ile birlikte kö?eleri [...]

  63. Ersin’in Blogu » Web 2.0 Jan 15, 09 at 10:42 am

    [...] ki yatay ?eritlere göre gözü daha az yoran renk geçi?li arkaplanlardan kullanmak isterseniz Free Fading Background Images pakedini [...]

  64. Web 2.0 için Stripe Kaynaklar? | Bir Ö?renci Klasi?i - AUG Jan 24, 09 at 9:42 am

    [...] Backround Paketi Bu adreste ise paket olarak  verilmi?. [...]

  65. Michael Jan 31, 09 at 4:19 pm

    Hi
    I Have Problem to fade image.
    I Have 1 Image and a like fade it dual sid (right And bottom)
    Can you Help ME

  66. Haz?r Web Tasar?m Araçlar? - HTD-34 Feb 25, 09 at 10:42 am

    [...] ki yatay ?eritlere göre gözü daha az yoran renk geçi?li arkaplanlardan kullanmak isterseniz Free Fading Background Images pakedini [...]

  67. Web 2.0 Araçlar? - Miraç Baran Sat?ç’?n Günlük Blogu Mar 31, 09 at 4:11 am

    [...] Free Fading Background Images [...]

  68. Tasar?mc?lara kaynaklar… - Pc Dersleri Pc Hakk?nda Her?ey..! Apr 16, 09 at 3:32 pm

    [...] 3. Arka plan yap?m? için: http://www.stripegenerator.com/ http://www.stripedesigner.com/ http://www.bittbox.com/freebies/30-free-fading-background-images/ [...]

  69. Web 2.0 Tasar?m Araçlar? | Miraç Baran Sat?ç'?n Günlük Blogu May 28, 09 at 5:47 am

    [...] ki yatay ?eritlere göre gözü daha az yoran renk geçi?li arkaplanlardan kullanmak isterseniz Free Fading Background Images pakedini indirebilirsiniz. 4. Yuvarlak kö?eli [...]

  70. Web 2.0 Tasar?m Nedir? « Mutlu Ar?c? – Bir Programc?n?n Günlü?ü Jul 17, 09 at 3:32 pm

    [...] ki yatay ?eritlere göre gözü daha az yoran renk geçi?li arkaplanlardan kullanmak isterseniz Free Fading Background Images pakedini [...]

  71. Pilli Blog | Bitmez tükenmez bilgi kayna?? » Web 2.0 Teknolojisi ve bedava araçlar Jul 21, 09 at 6:07 pm

    [...] ki yatay ?eritlere göre gözü daha az yoran renk geçi?li arkaplanlardan kullanmak isterseniz Free Fading Background Images pakedini [...]

  72. SC Bili?im – Bili?im Blo?u » Blog Archive » Haz?r Web 2.0 Tasar?m Araçlar? Aug 22, 09 at 6:36 am

    [...] ki yatay ?eritlere göre gözü daha az yoran renk geçi?li arkaplanlardan kullanmak isterseniz Free Fading Background Images pakedini [...]

  73. Stefan Popi Oct 24, 09 at 7:39 am

    http://www.atestateinformatica.ro

  74. Tasar?mc?lar ?çin Haz?r Web 2.0 Tasar?m Araçlar? Oct 25, 09 at 3:39 am

    [...] ki yatay ?eritlere göre gözü daha az yoran renk geçi?li arkaplanlardan kullanmak isterseniz Free Fading Background Images pakedini [...]

  75. rl Nov 14, 09 at 10:07 pm

    to all those that left mean comments; poo on you! these are great, thankx a bunch! I am a tad confused on how to USE them, but that may be because my html is still only at what I’d consider a “mildly” intermediate level (but improving!). Anyway I’ll take anything for free; thanks again! :)

  76. David March Nov 16, 09 at 10:51 am

    I will try these on my site.

  77. bayan giyim Jan 3, 10 at 9:40 pm

    it’s such a great work. thanks.

  78. cep telefonu modelleri Jan 12, 10 at 6:24 am

    it’s like a good idea but there’s nothing about effects.

  79. gelinlik fiyatlar? Jan 18, 10 at 7:35 pm

    i just wanted to thank you for this useful article and i’m glad to find this website. now i’m beginning to read your other articles. i hope we will live on well :)

  80. mutfak dekorasyon Feb 3, 10 at 7:53 pm

    I strongly agree and have forwarded it to a number of associates who found it very useful, keep up the good work.

  81. egitimblog Feb 21, 10 at 1:36 pm

    it’s such a great work. thanks.

  82. egitimblog Feb 21, 10 at 1:37 pm

    I will try these on my site.

  83. illusiadesign.it Feb 22, 10 at 6:26 am

    Hello, i have a new challenge for all of you guys (i’m trying too) i needed something on the last website i created (if you go to http://www.caseificioromagnuolo.it youll understand what i am talking about).

    i have a faded background that begins with a green from the top, then it becomes gradually white going down (according to the html-part-of-the-page fade so that it perfectly matches), at the bottom it becomes from white gradually blue (opening the page with explorer the blue part will conform with the rest of the page, but in all other browsers it wont).

    ok, as you can imagine if one day the guy decides to add more content to a page i will need to switch the bg.gif image in that page according to the height of the page, so there.

    I hope that was clear enough, thank you very much!!! :)

  84. illusiadesign.it Feb 22, 10 at 6:28 am

    oops, for the above, that was http://www.caseificioromagnuolo.com not .it sorry!!!!

  85. TOmmy Mar 3, 10 at 9:03 am

    Thanks this is perfect!

  86. dantel,orgu Mar 6, 10 at 8:49 am

    Thanks this is perfect!

LEAVE A COMMENT




Message: