About

A vignette effect darkens (or tints) the peripheral regions of an image relative to its center, guided by a radial falloff function. The brightness reduction at pixel coordinates (x, y) is proportional to the normalized Euclidean distance d from the image centroid, passed through a Hermite smoothstep curve. Misconfigured vignettes produce banding artifacts or unnatural halos that degrade perceived image quality. This tool computes the effect per-pixel on a full-resolution Canvas, preserving the alpha channel and outputting a lossless PNG. Note: processing time scales with pixel count. A 4000×3000 image contains 12 million pixels, each requiring distance calculation, smoothstep evaluation, and color blending.

The implementation supports elliptical vignettes that respect the image aspect ratio, arbitrary tint colors (not limited to black), and independent control of inner radius (where the effect begins) and softness (the width of the transition band). The smoothstep function eliminates hard edges that plague linear falloff methods. All computation runs in-browser with zero server uploads. Limitation: this tool approximates an optical vignette caused by lens geometry. It does not replicate wavelength-dependent falloff or cos⁴ law behavior of real optical systems.

Formulas

The vignette factor V for a pixel at position (x, y) is computed as follows. First, the normalized distance d from the image center is calculated:

d = √(x − c_x)²r_x² + (y − c_y)²r_y²

For circular mode, r_x = r_y = half-diagonal. For elliptical mode, r_x = w/2 and r_y = h/2. The smoothstep transition maps d into a vignette factor:

t = clamp(d − r_inners, 0, 1)

V = I ⋅ t² ⋅ (3 − 2t)

Final pixel color blending with tint color (R_t, G_t, B_t):

R_out = R_src ⋅ (1 − V) + R_t ⋅ V

Where I = intensity (0 - 1), r_inner = inner radius threshold, s = softness (transition band width), c_x, c_y = image center coordinates, w, h = image width and height. The alpha channel is left unmodified to preserve transparency.

Reference Data

Parameter	Range	Default	Effect Description
Intensity	0 - 100%	60%	Maximum opacity of vignette at image corners
Inner Radius	0 - 100%	30%	Distance from center where effect begins (as % of half-diagonal)
Softness	0 - 100%	50%	Width of the transition band between clear and vignetted regions
Shape	Circular / Elliptical	Elliptical	Circular ignores aspect ratio; elliptical matches image proportions
Tint Color	Any RGB hex	#000000	Color blended into peripheral pixels
Smoothstep Order	Hermite (3rd order)	-	Produces C¹ continuous falloff, no banding
Output Format	PNG (lossless)	-	Preserves alpha channel and color depth
Max Recommended Size	8000×8000	-	Larger images may cause memory pressure in browser tabs
Cos&sup4; Law Falloff	cos⁴(θ)	-	Real optical vignette model (not implemented here)
Linear Falloff	clamp(d)	-	Causes visible banding, inferior to smoothstep
Gaussian Falloff	e^−d²	-	Smooth but lacks inner radius control
Alpha Preservation	Yes	-	Transparent pixels remain transparent

Frequently Asked Questions

Linear falloff creates a constant rate of darkening, which the human eye perceives as a visible ring or band at the transition boundary. The Hermite smoothstep function t²(3 − 2t) has zero first derivatives at both endpoints (t = 0 and t = 1), producing a C¹ continuous curve. This means the transition eases in and eases out, eliminating perceptible edges. The result matches how natural optical vignetting appears in camera lenses.

Circular mode normalizes pixel distance using a single radius (the half-diagonal), producing a perfectly round vignette regardless of image aspect ratio. On a wide panoramic image, this leaves the top and bottom corners much darker than the sides. Elliptical mode uses r_x = w/2 and r_y = h/2 independently, so the vignette conforms to the image shape. Use elliptical for standard photos. Use circular when you want uniform corner darkening for square crops or artistic effect.

No. The implementation only modifies the R, G, B channels. The alpha (A) channel is preserved byte-for-byte. Fully transparent pixels remain fully transparent. Partially transparent pixels retain their original opacity but have their color component blended with the tint. This prevents unexpected opacity changes when layering the vignetted PNG over other content.

Banding occurs when the gradient has too few discrete tonal steps across a large spatial area. In 8-bit-per-channel images, there are only 256 intensity levels. A very subtle vignette (low intensity, wide softness) spread over thousands of pixels can produce visible steps. To minimize banding: increase intensity so tonal differences per pixel are larger, reduce softness to narrow the transition band, or add slight noise to the output in post-processing (dithering). This tool uses floating-point math internally and rounds only at final output, which is the optimal approach within 8-bit constraints.

The algorithm is O(n) where n is the total pixel count (w × h). Each pixel requires one distance calculation (2 multiplications, 1 addition, 1 square root), one smoothstep evaluation (3 multiplications, 1 subtraction), and 3 channel blends (3 multiplications, 3 additions). A 4000×3000 image (12M pixels) typically processes in 200 - 500ms depending on device. Images above 20M pixels may take 1 - 3 seconds.

Yes. The tint color parameter accepts any RGB hex value. Setting it to #FFFFFF produces a white vignette (light leak effect). Warm tones like #3B1A00 simulate vintage film darkening. Cool blues like #001030 create a cinematic look. The blending formula R_out = R_src(1 − V) + R_t ⋅ V works identically regardless of tint color.