If you craft and cut up your web designs in Photoshop, chances are you've run into transparent PNGs that have gradients or drop shadows or outer glows that don't behave properly. Maybe you wanted to enrich the layer beneath's background color through the use of a color burn gradient. Or maybe you use the multiply blend effect to create a drop shadow. If you didn't flatten the transparency, then there's a good chance your final work looked slightly different than your comp.

What you saw in Photoshop

What you ended up with

Why does it do that?

While using layer or effect blend modes (like linear burn or multiply) are easy and quick in Photoshop, the .PNG files will not be able to apply them when saved. Instead, it will default back to a "normal" blending mode, typically making the gradient grayish or lightening the drop shadow.

What happens when saving non-normal blend modes?

The fix

One solution is to use the desired blend mode that you normally would, such as the linear burn. Then when you have the gradient or shadow looking the way you want, use the eyedropper to select the color in the most opaque region of your shadow or gradient. From there, you can switch back to a "normal" blending mode and use the color you selected instead of black or gray.

Using a normal blend mode with a modified gradient

Of course, there are other ways to get around it. This is just one easy solution that you could use. Hope you find it helpful!