Overview
Introduction
This tool removes an outline ring from around a PNG's shape by eroding its alpha silhouette, computed entirely client-side.
It's the inverse of adding a shape-hugging outline: it clears the outermost ring of the existing shape to transparent rather than growing the canvas outward.
What Is PNG Outline Remover?
An erosion tool that checks every opaque pixel for a transparent neighbor (or the canvas edge) within the requested thickness, and clears it to transparent if one is found.
The canvas dimensions never change; only how much of it is visible does.
How PNG Outline Remover Works
For each opaque source pixel, the tool searches a bounded neighborhood within the chosen thickness for any transparent pixel or the edge of the canvas.
If one is found, that pixel is part of the outer boundary ring and gets cleared to fully transparent; pixels deep enough inside the shape stay untouched.
When To Use PNG Outline Remover
Use it to strip an unwanted colored outline off an icon or badge asset before re-processing it.
It's also useful for shrinking a shape's visible silhouette slightly to compensate for an outline that will be added later elsewhere.
Often used alongside PNG Outline Adder, PNG Stroke Adder and PNG Stroke Remover.
Features
Advantages
- Runs entirely client-side; your image never leaves the browser.
- Preserves canvas dimensions, so downstream layout math doesn't shift.
- Works on any shape, not just rectangles.
Limitations
- Thin details (features narrower than twice the chosen thickness) can be eroded away entirely rather than just having their edge trimmed.
- Very thick erosion on large images can be slow, since the neighborhood search scales with the square of the thickness.
Examples
Best Practices & Notes
Best Practices
- Preview the result before downloading; thin shape details can vanish entirely at higher thickness values.
- Use the same thickness you originally used to add an outline, for a clean matching removal.
Developer Notes
This tool's lib function is a thin wrapper re-exporting the stroke remover's implementation, since "outline" and "stroke" are the same shape-hugging border operation; the shared erosion math lives in a pure function over a plain Uint8ClampedArray pixel buffer with no DOM dependency.
PNG Outline Remover Use Cases
- Stripping an unwanted colored outline off a badge or icon
- Shrinking a shape's silhouette before adding a different effect
- Cleaning up a sticker asset that has excess border baked in
Common Mistakes
- Choosing a thickness larger than half the width of thin shape details, which erases them instead of just trimming their edge.
- Expecting the canvas to shrink — erosion only changes which pixels are visible, not the image's dimensions.
Tips
- Check the transparency checker tool afterward to confirm how much of the image ended up transparent.
- If a shape disappears entirely, try a smaller thickness value.