Skip to content
Formats

Transparent GIFs: Why Edges Break and What to Use Instead

Transparent GIFs get black halos, jagged edges and a fringe of whatever colour was behind them at export. None of this is a bug in your tool — it is the format doing exactly what it was designed to do in 1987, and knowing which part is unfixable tells you when to stop fighting it.

12 September 2026 · 6 min read

GIF transparency is one bit

A GIF frame designates one palette entry as transparent. Every pixel is either that entry — fully invisible — or it is not, fully opaque. There is no in between. This is the entire mechanism.

PNG, WebP and video with an alpha channel store eight bits of transparency per pixel, which allows a pixel to be 40% opaque. GIF cannot express that, and no encoder setting changes it.

Why that produces halos

Antialiasing works by making edge pixels partially transparent, so a curve blends into whatever is behind it instead of stair-stepping. When such an image is converted to GIF, each of those partial pixels has to become either fully opaque or fully invisible.

Whatever it was blended against gets baked in. Composite over white, export, then place the GIF on a dark page, and the edge pixels carry a white fringe. Composite over black and you get the notorious dark halo. The colour of the halo tells you exactly what background the file was flattened against.

If your transparent GIF has a white halo, it was flattened over white. Re-exporting with the destination's background colour behind it will hide the problem on that background specifically.

The three things that actually help

None of these give you real alpha, but each one meaningfully reduces how bad the edges look.

  • Match the background. If you know the GIF will sit on #1b1b1f, flatten it against #1b1b1f. The fringe becomes invisible because it is the same colour as its surroundings.
  • Prefer hard edges. Text with a solid outline and no shadow survives conversion far better than a soft drop shadow, which is a gradient of near-transparent pixels — the worst case for one-bit alpha.
  • Export larger and let the page scale it down. Browser downscaling reintroduces smoothing that the format could not store.

What to use instead

If the animation has to sit cleanly on an unknown or changing background, GIF is the wrong container and no amount of tuning will change that.

A PNG or WebP frame sequence keeps full alpha and imports directly into After Effects, Blender and every sprite packer. WebM with VP9 supports alpha and plays in Chrome, Edge and Firefox. Animated WebP keeps alpha and is broadly supported in browsers now, though not in older email clients. Which one you pick depends entirely on what is going to open it.

FormatAlphaBest for
GIF1 bit — on or offInline autoplay anywhere, old clients
PNG sequence8 bitHanding frames to other software
WebP (animated)8 bitWeb, when the audience is modern browsers
WebM (VP9)8 bitWeb overlays in Chrome, Edge, Firefox
Alpha support by format

The checkerboard is not part of your image

Editors draw a grey checkerboard behind transparent regions so you can see them. It is a viewport convention, not content, and it is never written to the exported file.

If your exported GIF has a visible checkerboard, something has flattened the preview rather than the document — usually a screenshot of the editor rather than an actual export.

Try it in the editor

Everything described here runs in your browser, on your machine.

All guides