Is this the same as anti-aliasing?

No. Anti-aliasing (see the GIF Edge Refiner) smooths an already-existing jagged edge subtly. This tool intentionally creates a much more visible soft fade-out gradient across a whole feather band, even on an edge that was already perfectly smooth.

How does the feather radius work?

Every opaque pixel's alpha is scaled based on how close it is to the nearest transparent pixel, within the chosen radius: right at the edge, alpha drops toward 0; by the time you're `radius` pixels inward, the original alpha is fully restored.

Does this affect fully opaque, background-free GIFs?

It only affects pixels near a transparent boundary, so a fully opaque GIF (no transparency anywhere) won't be changed at all: there's no edge to feather.

Can I feather just the outer few pixels for a subtle effect?

Yes, use a small radius (e.g. 2-4 pixels) for a subtle softening, or a larger radius for a more pronounced vignette-style fade.

GIF Edge Feather - Fade an Animated GIF's Edges into Transparency

Overview

Introduction

This tool fades every frame's alpha near its silhouette edge into a smooth gradient, entirely client-side, over a chosen feather radius.

Unlike simple anti-aliasing, this intentionally introduces new partial transparency across a whole band near the edge, producing a soft vignette-style fade-out.

What Is GIF Edge Feather?

A client-side GIF edge-softening tool that, for every frame, finds each opaque pixel's distance to the nearest transparent pixel within a bounded search radius, then scales that pixel's alpha proportionally: 0 right at the edge, ramping linearly up to the pixel's original alpha at `radius` pixels inward.

The effect is applied independently to every frame, so a moving or changing silhouette gets a correctly-fitted feather on each frame of the animation.

How GIF Edge Feather Works

For each opaque pixel, a bounded neighborhood search finds the nearest transparent pixel (or the canvas edge, treated as transparent) within `radius` pixels, tracking the shortest distance found.

That distance is divided by `radius` and clamped to 1, giving a 0-to-1 fade factor that's multiplied against the pixel's original alpha, producing a smooth gradient rather than a hard cutoff.

When To Use GIF Edge Feather

Use it to give a transparent-background animated sticker or overlay a soft, vignette-style fade instead of a hard edge, for a gentler visual blend into whatever it's placed over.

It's also useful for softening a subject's silhouette before compositing it over a busy or textured background.

Often used alongside GIF Edge Refiner, GIF Edge Cleaner and GIF Corner Rounder.

Features

Advantages

Produces a deliberate, controllable gradient fade rather than a subtle tweak.
Only affects pixels near a transparent boundary; fully opaque regions are untouched.
Runs entirely client-side; the uploaded animation is never sent to a server.

Limitations

A large feather radius on a small subject can eat noticeably into the visible content, since the fade works inward from every edge.
This tool doesn't preserve a hard edge option within the same pass; for that, use a radius of 0/1 or the GIF Edge Refiner instead.

Examples

Add a subtle vignette fade to a sticker

Input

A 150x150 animated GIF with a hard-edged transparent-background sticker, radius 6

Output

A 150x150 animated GIF where the sticker's edge fades smoothly to transparent over the outer 6 pixels on every frame

The fade is recomputed per frame, so a rotating or moving sticker keeps a consistent-looking feather throughout playback.

Best Practices & Notes

Best Practices

Choose a feather radius proportional to the subject's size; a radius that's too large relative to a small subject can fade away most of the visible content.
Use a smaller radius for a subtle blend, a larger one for a pronounced vignette effect.
Preview the result against the eventual background the GIF will be placed over, since feathering is most noticeable there.

Developer Notes

featherGifEdges in gif-edge-feather.ts maps featherFrame across every frame of a DecodedGif; featherFrame calls distanceToTransparency (a bounded nearest-neighbor search) per opaque pixel and scales alpha linearly by that distance over `radius`. This is deliberately distinct from gif-edge-refiner.ts's approach: that tool only touches pixels already on a hard transition and blends color, this tool creates new graduated transparency across a whole band and never blends color, only alpha.

GIF Edge Feather Use Cases

Giving a transparent-background sticker or overlay a soft vignette-style fade instead of a hard edge
Softening a subject's silhouette before compositing it over a busy or textured background
Creating a stylized fade-out effect for an animated badge or icon

Common Mistakes

Using a feather radius too large relative to the subject's size, fading away most of the visible content.
Confusing this with anti-aliasing: this tool intentionally creates new transparency, it doesn't just smooth an existing edge.

Tips

Start with a small radius (2-4px) and increase gradually while checking the preview.
Combine with the GIF Background Adder afterward if you want the faded edges to blend into a specific solid backdrop instead of staying transparent.

GIF Edge Feather