Overview
Introduction
This tool adds a photographic vignette effect to a PNG, computed entirely client-side, darkening the image toward its edges and corners.
It's the same look many photo editing apps produce with their "vignette" slider.
What Is PNG Vignette Effect Adder?
A radial darkening filter that computes each pixel's normalized distance from the image's center (0 at the center, 1 at the corners) and darkens its RGB channels proportionally to how far past a configurable clear-zone radius it falls.
The strength and clear-zone size are both independently adjustable, giving fine control over how subtle or dramatic the effect looks.
How PNG Vignette Effect Adder Works
For every pixel, the tool computes its Euclidean distance from the image's center, normalized against the center-to-corner distance so the corners always reach a normalized distance of 1.
A darkening factor is then derived from how far that normalized distance is past the clear-zone size, scaled by the strength percentage, and each RGB channel is multiplied down toward zero (black) by that factor.
When To Use PNG Vignette Effect Adder
Use it to add a classic photographic vignette to a photo for a moodier, more focused look.
It's also useful for subtly drawing viewer attention toward the center of a graphic or hero image.
Often used alongside PNG Hexagonalizer and PNG Triangulator.
Features
Advantages
- Runs entirely client-side; your image never leaves the browser.
- Independent strength and clear-zone size controls for fine-tuned results.
- Leaves the alpha channel untouched, so transparency-based effects layer cleanly afterward.
Limitations
- The darkening is a simple multiplicative falloff toward black; it doesn't replicate lens-specific optical vignetting characteristics like color shift or elliptical falloff shape.
- Very small images may show a less smooth-looking gradient since there are fewer pixels across the falloff distance.
Examples
Best Practices & Notes
Best Practices
- Use a lower strength and larger clear-zone size for a natural-looking photographic vignette.
- Combine with a subject centered in the frame, since the darkening is always centered on the image's midpoint.
Developer Notes
The pure vignette math lives in a lib function operating on a plain Uint8ClampedArray pixel buffer with no DOM dependency, computing a per-pixel normalized radial distance and a linear falloff factor rather than sampling a radial gradient via canvas.
PNG Vignette Effect Adder Use Cases
- Adding a moody photographic vignette to a portrait or landscape photo
- Drawing viewer attention toward the center of a hero image
- Stylizing a graphic with a classic darkened-edge look
Common Mistakes
- Setting strength to 100% with a very small size and getting an overly dark, spotlight-like result rather than a subtle vignette.
- Expecting the vignette to follow the subject's position rather than the image's geometric center.
Tips
- Start around 40% strength and 50% size for a natural-looking result, then adjust from there.
- Preview at full resolution before downloading, since the vignette's visual balance can look different when scaled down in a thumbnail.