How is this different from the GIF Outline Adder?

They share the same shape-hugging dilation algorithm for outward strokes. This tool adds a second, configurable dimension the outline adder doesn't expose: 'inside' placement, which paints the stroke within the existing silhouette instead of growing the canvas outward: the same 'outside/inside/center' choice design tools like Figma expose for strokes.

What does 'inside' placement actually do?

Instead of expanding the canvas and adding a ring outside the original shape, an inside stroke recolors existing opaque pixels within the stroke width of the alpha edge, keeping the canvas size identical to the source.

Does the stroke recompute per frame?

Yes, exactly like the GIF Outline Adder, the stroke is derived independently from each frame's own alpha silhouette, so moving or changing content stays correctly stroked throughout playback.

Which placement should I use?

Use 'outside' (the default) when you want the stroke to add visible size around the subject, like a sticker outline. Use 'inside' when you want to keep the exact same canvas dimensions and instead recolor the subject's own edge pixels.

GIF Stroke Adder - Configurable Inside/Outside Stroke for Animated GIFs

Overview

Introduction

This tool draws a solid-color stroke that hugs the actual shape of an animated GIF's visible content, entirely client-side, with configurable width, color, and inside-vs-outside placement.

It builds directly on the GIF Outline Adder's shape-hugging dilation for its default 'outside' placement, then adds an 'inside' option for cases where you don't want the canvas to grow.

What Is GIF Stroke Adder?

A client-side GIF stroking tool that decodes an uploaded animation and, for each frame, either dilates the alpha silhouette outward (outside placement, canvas grows) or recolors existing opaque pixels near the alpha edge (inside placement, canvas unchanged), filling the affected pixels with a chosen color.

Both placements are recomputed independently per frame, so a moving or morphing subject stays correctly stroked across the whole animation.

How GIF Stroke Adder Works

For 'outside' placement, this tool calls the exact same dilateFrameOutline function the GIF Outline Adder uses, growing every frame's canvas by the stroke thickness. For 'inside' placement, it instead scans every originally-opaque pixel and recolors it if any transparent pixel (or the canvas edge) lies within the stroke thickness, without touching the canvas size.

Either way, the stroked frames are re-encoded into a single animated GIF, keeping each frame's original delay and the source's loop count.

When To Use GIF Stroke Adder

Use outside placement to give a transparent-background sticker a comic-book-style outline that adds visible size.

Use inside placement when you need the stroke's canvas dimensions to exactly match the source, e.g. to keep pixel-perfect alignment with other same-size assets.

Often used alongside GIF Stroke Remover, GIF Outline Adder and GIF Border Adder.

Features

Advantages

Exposes both outside and inside placement, unlike the fixed-placement GIF Outline Adder.
Recomputed independently per frame, so moving or changing content stays correctly stroked throughout playback.
Runs entirely client-side; the uploaded animation is never sent to a server.

Limitations

Requires a meaningful alpha channel to trace, the same as the GIF Outline Adder.
Inside-placement strokes permanently overwrite the original edge pixels' colors: there's no way to recover what was under the stroke afterward from the output alone.

Examples

Add an inside stroke without growing the canvas

Input

A 128x128 animated GIF, thickness 4, white, position 'inside'

Output

A 128x128 animated GIF (same size) with a 4px white stroke painted just inside the original silhouette's edge on every frame

The canvas dimensions stay identical to the source, unlike an outside stroke or outline, which would grow it by 8px.

Best Practices & Notes

Best Practices

Use outside placement by default; switch to inside only when you specifically need the output canvas size to match the input.
Keep the stroke thickness proportional to the subject's size to avoid obscuring detail, especially with inside placement on small subjects.
Preview multiple frames, not just the first, to confirm the stroke looks correct throughout the animation.

Developer Notes

addStrokeToGif in gif-stroke-adder.ts imports and reuses dilateFrameOutline from gif-outline-adder.ts for 'outside' placement (identical output to addOutlineToGif for the same thickness/color), and implements its own paintInsideStroke for 'inside' placement, which recolors in place via clonePixelBuffer without growing the canvas. The two tools are intentionally not merged into one, since 'outline adder' and 'configurable stroke adder' serve different search intents even though their outside-mode output is byte-identical.

GIF Stroke Adder Use Cases

Adding a comic-book-style outline to a transparent-background animated sticker with an explicit inside/outside choice
Recoloring a subject's own edge pixels without changing the animation's canvas size
Preparing a stroked animated asset for use as a reaction GIF or emote

Common Mistakes

Using inside placement and being surprised the canvas size didn't change: that's the intended behavior of that mode.
Choosing a very thick inside stroke on a small or thin subject and unintentionally erasing most of its original color.

Tips

If you only ever need outward-growing strokes, the simpler GIF Outline Adder does the same thing with one fewer decision to make.
Combine an inside stroke with the GIF Background Adder to flatten the result onto a solid backdrop while keeping the original canvas size.

GIF Stroke Adder