Overview
Introduction
This tool softens (feathers) a PNG's edges, entirely client-side, by blurring only its alpha channel while leaving the underlying colors sharp.
It's a quick way to turn hard-cut or jagged transparency edges into a smooth fade.
What Is PNG Edges Softener?
A client-side PNG alpha-channel softener that applies a separable box blur exclusively to the alpha (transparency) values of every pixel.
The color channels (red, green, blue) are copied through completely untouched, so only where the image fades in and out is affected, not how sharp the colors themselves look.
How PNG Edges Softener Works
The tool first extracts just the alpha channel into a separate buffer, then runs a horizontal box-blur pass followed by a vertical box-blur pass over it (the standard way to implement an efficient 2D box blur), and finally writes the blurred values back into the alpha channel of a clone of the original image.
Edge pixels near the image boundary sample using clamped (repeated-edge) coordinates rather than wrapping or going out of bounds.
When To Use PNG Edges Softener
Use it to soften a hard-cut cutout (e.g. from the background remover or edge hardener tools) into a more natural-looking feathered edge, or to create a soft vignette-style fade effect.
It's also useful for smoothing jagged, pixelated transparency edges left behind by other lossy image operations.
Often used alongside PNG Edges Hardener and PNG Blurrer.
Features
Advantages
- Runs entirely client-side; the uploaded image is never sent to a server.
- Only affects transparency, leaving color detail fully intact.
- Configurable radius lets you dial in a subtle or dramatic feather.
Limitations
- A box blur is a simple approximation of a true Gaussian feather and can show slightly less natural falloff at large radii compared to a proper Gaussian blur.
- Larger radii on larger images take proportionally longer to process, since every pixel samples a 2*radius+1 window twice (once per pass).
Examples
Best Practices & Notes
Best Practices
- Start with a small radius (2-4px) for a subtle feather, and increase only if you want a more pronounced fade.
- Combine with the edge hardener tool first if your source has messy, uneven antialiasing you want to normalize before feathering.
Developer Notes
softenPngEdges is a pure lib function operating on a plain Uint8ClampedArray PixelBuffer: it extracts the alpha channel into a Float32Array, runs a two-pass separable box blur with clamped edge sampling, and writes the result back into a cloned buffer's alpha bytes — no DOM access until the component paints the result for preview/download.
PNG Edges Softener Use Cases
- Softening a hard-cut cutout into a more natural-looking edge
- Creating a vignette-style fade effect around an image
- Smoothing jagged transparency edges left by another lossy operation
Common Mistakes
- Using a very large radius on a small image, which can feather so much of the edge that fine details effectively disappear.
- Expecting color sharpness to change — this tool intentionally leaves RGB channels completely untouched.
Tips
- Pair with the general blurrer tool if you also want to soften the color content, not just the transparency.
- Use a small radius for UI icons and a larger radius for photographic vignette effects.