I have a site that I am working on (shown at a temporary development copy) where I was attempting to use a transparent gradient in a PNG to create a "fade-in" effect at the bottom of the site. This would be a fade from the background color of the site to transparent, so that it would fade in nicely when overlaying content and disappear when overlaying the background.

The fade-in over content works nicely. However, when overlaying the background color (as seen to the right and left of the middle photograph), there is a band where the transparency ought to be.

I've tried several combinations of gamma settings and color profiles and browsers, but everything seems to be correct. Is this a known issue with some PNG renderers?

Thanks. Incidentally, this development copy is temporary, but I'll link to where the final version will reside for posterity.

  • And, yes, the banding is very slight. Different light conditions seem to affect its visibility, so you'll have to look close. David Alan Hjelle about 7 years ago
  • Nor does the banding show up in the picture doctype snapped; you'll have to go to the link. I'm starting to think I'll just ditch the gradient in favor of a sudden transition. David Alan Hjelle about 7 years ago

2 answers


You could try re-doing the image as .PNG and then use TweakPNG to actually remove the gamma information.

If you're using Photoshop, make you image as a gradient from the background color to transparent, do a Save for Web... as PNG, then throw it in TweakPNG and that should be it.

Here's the link to pick up TweakPNG: http://entropymine.com/jason/tweakpng/

Answered about 7 years ago by tahdhaze09
  • I'll have to fiddle with that. I'm current using GIMP and ensuring that the gamma information is not saved, but perhaps a PNG tool like TweakPNG would be helpful. Thanks. David Alan Hjelle about 7 years ago
  • Unfortunately, I'm fairly sure that's not the issue...here's hoping someone has some further thoughts? David Alan Hjelle about 7 years ago
  • I have verified (via TweakPNG) that the PNG has no gamma information, so that is not the issue. Thanks, though. David Alan Hjelle about 7 years ago
  • Sorry that didn't solve your problem. How are you doing your background color? Is it through CSS, HTML, or an image? tahdhaze09 about 7 years ago
  • The background is a PNG image as well. It's referenced via the CSS and assigned to the <body> tag. David Alan Hjelle about 7 years ago

i'm not sure i exactly follow what your asking because it looks like you've already got the fade...but i think your asking how to make your site (the dark box with the images) fade at the bottom to the background color. In your image editing software have a layer over the site image that fades from transparent (top) to the color of your BG (bottom). does that make sense

Answered about 7 years ago by dougmays
  • You're right--that's what I've accomplished already. The problem is that the transparent part doesn't blend with the background correctly; there is an extra band over the background. I just tried it on a fourth system, and it is nearly impossible to see here. Strange... David Alan Hjelle about 7 years ago