Overview
Introduction
This tool adds a shape-hugging outline around a PNG's non-transparent content, computed entirely client-side.
It traces the real silhouette of your image's alpha channel rather than drawing a generic rectangular frame around the whole canvas.
What Is PNG Outline Adder?
An outline generator that checks every newly-expanded canvas pixel for a nearby originally-opaque source pixel within the chosen thickness, filling it with a solid color if one is found.
The result is a clean, uniform-width outline that follows the exact contour of your image's shape.
How PNG Outline Adder Works
The output canvas expands by the outline thickness on every side. For each pixel in that larger canvas, the corresponding source position is checked: if it was opaque, the original color is kept; otherwise nearby source pixels are searched within the outline radius, filling the outline color if any were opaque.
This distance-based approach correctly follows curves and irregular shapes, not just straight rectangular edges.
When To Use PNG Outline Adder
Use it to give a logo, icon, or cutout a clean colored outline for badges, stickers, or social media graphics.
It's also useful for improving a transparent icon's contrast against a busy or similarly-colored background.
Often used alongside PNG Outline Remover, PNG Stroke Adder and PNG Stroke Remover.
Features
Advantages
- Runs entirely client-side; your image never leaves the browser.
- Traces the actual alpha shape instead of a rectangular frame.
- Works with any outline color and opacity.
Limitations
- Very thick outlines on large images can be slow, since the neighborhood search scales with the square of the thickness.
- The outline has hard, non-antialiased edges, matching the source image's own alpha channel precision.
Examples
Best Practices & Notes
Best Practices
- Choose an outline color that contrasts with the backgrounds you plan to place the image on.
- Keep thickness proportional to the image's size so it doesn't overwhelm fine detail.
Developer Notes
This tool's lib function is a thin wrapper re-exporting the stroke adder's implementation, since "outline" and "stroke" are the same shape-hugging border operation; the shared math lives in a pure function over a plain Uint8ClampedArray pixel buffer with no DOM dependency.
PNG Outline Adder Use Cases
- Adding a colored outline to a die-cut icon or logo
- Improving contrast for a transparent asset against varied backgrounds
- Creating badge or sticker sheet graphics
Common Mistakes
- Expecting the output to stay the same size as the input — the canvas always grows by the outline thickness.
- Using a low-opacity outline color and expecting a fully opaque ring; the fill respects the color's own alpha value.
Tips
- Use the outline remover tool if you need to undo an outline you already baked in.
- Combine a thick white outline with a subtle drop shadow for a sticker look.