Tips for using blend modes for drop shadow or glow in Photoshop

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!

3 comments (Add your own)

1. Michael Thomas wrote:
I think I fight this battle at least once a week. Lately I've been using the method described above, but there has been a few times that I've just generated the CSS3 gradient for the entire section to cut out the .png altogether. The trick is to use rgba colors in your gradient, thus letting noise (like in your example) come through.

I still do this sparingly because of poor CSS3 adoption by IE.

Tue, April 26, 2011 @ 1:20 PM

2. Evan Brandell wrote:
I totally agree, Michael. I use CSS3 wherever possible. This example was taken from an actual project – part of a major upcoming site redesign *cough* – so it needs to look great. Even in IE.

Wed, April 27, 2011 @ 2:23 PM

3. Jorja wrote:
Great cmoomn sense here. Wish I'd thought of that.

Wed, June 12, 2013 @ 5:16 PM

Add a New Comment


Comment Guidelines: No HTML is allowed. Off-topic or inappropriate comments will be edited or deleted. Thanks.



Try it today. It’s Free.

Takes less than 60 secondsNo commitmentNo payment information required

Get Started