Incorrect white matte behind antialiasing on imported sprites

Question

I'm importing a sprite into Unity, and adding it to a Screen Space Overlay canvas to use for a UI.

The image I'm importing looks exactly as I want it, but in Unity the anti-aliased edges look like they're going to a white background color, instead of just fading over whatever is actually behind them.

I'm using these import settings:

I'm using a default UI/Image component to add it to the canvas.

This is the image I'm importing - it's a 32 bit PNG exported from Fireworks: (also shown over a black background)

Just to confirm, this looks fine everywhere else in Unity, preview panels, pickers etc. I am packing this sprite using the built in Sprite Packer if that changes anything.

And the final result:

How can I get rid of these artifacts on the corners?

Answer 1

The problem was the RGB values of the transparent pixels. By default they are white, and any scaling operations cause this white color to be blended with the partially transparent pixels.

I essentially made a slightly larger version of the button background shape, put it in a layer behind everything, and then wrote back into the alpha channel making it transparent. This means that the neighboring pixels are then the same color as the partially transparent ones.

The end result: