I rotated my transparent logo at an angle and got white corners; how do I keep the background transparent?

The white corners are the background color filling the new space around the tilted logo. To keep them transparent you need two things together: a PNG or WebP save format, and 'Transparent background instead of a color' switched on. Choose JPEG and there is no way to keep them clear, because that format has no transparency at all.

Published · 3 min read

Where the corners come from

Turn a rectangle by anything other than a right angle and it needs a bigger canvas to show in full, which leaves triangles around it that the logo does not cover. The tool has to put something there: either a color, white by default, or transparency.

Worked example

An 800 × 300 px logo turned 15 degrees with 'Expand to fit': the canvas becomes 851 × 497, and the triangles around the logo need a color or transparency.

The same logo at -8 degrees: an 834 × 409 canvas, thinner triangles but still there.

At 90 or 180 degrees there are no triangles, because the logo fills the canvas exactly.

The three causes of white

  • You chose JPEG under 'Save as': the transparency option is disabled, and the tool fills the corners and every transparent area inside the logo with the background color, with a warning.
  • You unticked 'Transparent background': the tool ticks it automatically when it finds transparency in the image, but if you untick it the background color fills the corners and also the transparent areas inside the logo, and a note tells you so.
  • The logo was never transparent: a PNG saved on white can look transparent in some viewers but is not. In that case the white was in the file before you rotated it.

The right way

  1. Open the Image rotator and flipper tool and choose the PNG or WebP logo.
  2. Type the angle or move the slider, and keep 'Expand to fit' so the logo's ends are not clipped.
  3. Under 'Save as', keep 'Original format' or pick PNG or WebP.
  4. Make sure 'Transparent background instead of a color' is ticked, then download.

How to check the result is transparent

The preview shows transparent areas against the page background, which can be hard to tell from white. The clearest test: place the downloaded file over a colored background in your design app or store editor. If the color shows around the logo, it is transparent; if a white rectangle appears, go back over the steps above.

Note too that a free angle recalculates the pixels, so the logo's edges get slightly softer. That is what makes a slanted edge look smooth rather than jagged, which usually suits a logo.

Common questions

Does WebP keep transparency like PNG?

Yes, WebP keeps transparency, but the tool saves it at quality 92, a slight loss. PNG is lossless.

I want the logo on a colored background, not transparent. Can I?

Yes. Untick 'Transparent background' and pick the color under 'Background color', but it will also fill the transparent areas inside the logo.

Does rotating make the file bigger?

With expand, the canvas dimensions grow, so the file may grow a little, but transparent areas compress well in PNG.