Vignette Effect

Darken photo perimeter corners to direct viewer gaze toward center subject.

100% Client-Side • 100% Free

Select Image for Vignette Effect

Drag and drop your JPG, PNG, or WebP photo here, or click to choose from your device.

100% In-Browser Memory Processing • Instant & Private
In-Depth Technical Guide•8 min read•2RUN Engineering Team
100% Client-Side • Zero Upload

Add Vignette to Image: Optical Falloff Emulation, Radial Gradient Masks & Subject Focus

⚡How to Add a Vignette to a Photo in Your Browser

1

Upload Your Image

Drag and drop your photo into the upload area or click to select from your device. The editor loads the image onto an interactive canvas.

2

Adjust Vignette Radius and Intensity

Use the Radius slider to expand or contract the clear central area, and adjust the Intensity slider to control how dark or light the edge shading appears.

3

Fine-Tune Feather Softness and Color

Adjust the Feather slider to ensure a seamless, organic transition, and choose between classic black shading or high-key white halo shading.

4

Download Your Vignette-Enhanced Photo

Click 'Download Image' to save your professionally composed photograph in high-resolution PNG, WebP, or JPEG format.

In photography, cinematography, and digital visual storytelling, directing the viewer's gaze is the fundamental objective of artistic composition. A photograph with busy edges, brightly lit background distractions, or washed-out borders often causes the viewer's eyes to wander aimlessly across the frame. Vignetting—the smooth, gradual darkening (or lightening) of an image's periphery relative to its central focal point—is one of the most powerful and timeless compositional techniques in the visual arts.

Our browser-native Add Vignette tool allows you to sculpt precision optical falloff and cinematic edge shading directly in your browser. Emulating natural lens barrel physics through mathematical radial gradient masks, our engine offers customizable vignette radius, feather softness, intensity, and color (classic dark shadow vignette or high-key vintage white vignette). Whether you are enhancing portrait photography, creating moody cinematic landscapes, or adding retro character to product shots, our tool delivers professional results in seconds. Executing 100% locally in your browser via HTML5 Canvas, your private photos and creative assets remain completely secure.

Read the full technical guide

The Optical Physics of Vignetting: The Cosine Fourth Law

In traditional optical engineering, vignetting is a natural physical consequence of camera lens geometry. When light passes through a compound lens system, peripheral light rays strike the aperture diaphragm and sensor plane at oblique angles, traveling a greater optical path length than central on-axis rays.

This physical falloff is governed by the Cosine Fourth Law of Illumination, formulated by Carl August von Steinheil in the 19th century: $E_\theta = E_0 \cos^4(\theta)$, where $E_0$ is the central illuminance and $\theta$ is the angle of incidence. Furthermore, physical lens barrels, lens hoods, and wide apertures cause mechanical vignetting by partially occluding light rays from reaching the outer corners of the sensor. While optical engineers spend fortunes designing complex lenses to minimize this effect, visual artists deliberately re-introduce controlled vignetting to harness its immense compositional power.

Visual Psychology: Guiding Viewer Gaze and Perceptual Hierarchy

Human ophthalmology and visual psychology demonstrate that human eyes are naturally attracted to areas of high contrast and luminous brightness, instinctively ignoring darker, low-contrast peripheries. In un-vignetted photography, bright background elements—such as a passing car, a bright sky patch in tree foliage, or a distracting sign—compete directly with the main subject.

Applying a subtle vignette gently suppresses peripheral distractions. By shading the outer corners by 10% to 30%, the viewer's gaze is channeled effortlessly toward the center of the frame, locking focus onto a portrait subject's eyes, an e-commerce product feature, or an architectural doorway. The resulting composition feels intentional, balanced, and visually restful.

Radial Gradient Mathematics: Center Coordinates & Smoothstep Falloff

Digital vignette synthesis relies on calculating the normalized radial distance of every pixel $(x, y)$ from the image center $(x_0, y_0)$:

$$r(x, y) = \sqrt{\left(\frac{x - x_0}{W / 2}\right)^2 + \left(\frac{y - y_0}{H / 2}\right)^2}$$ In an elliptical vignette, horizontal and vertical distances are normalized by half the canvas width and height, ensuring the shading conforms naturally to widescreen 16:9, portrait 9:16, or classic 3:2 aspect ratios without circular distortion. The transition between the un-shaded central clear zone ($r_{\text{inner}}$) and the fully shaded periphery ($r_{\text{outer}}$) is mediated by a smooth Hermite interpolation (Smoothstep) curve: $f(t) = 3t^2 - 2t^3$. This prevents harsh, visible banding rings, delivering an imperceptible, organic light falloff.

Dark Vignette vs. Light Vignette: Cinematic Drama vs. High-Key Vintage

Our tool supports two distinct artistic modalities: • Classic Dark Vignette: Darkens outer corners with black or charcoal shading. This is the universal standard for cinematic storytelling, dramatic portraiture, moody street photography, and film noir aesthetics. It enriches color saturation in peripheral shadows and imparts psychological intimacy to the scene. • High-Key Light (White) Vignette: Lightens outer corners with a soft white glow. Frequently celebrated in vintage Victorian tintypes, romantic wedding photography, dreamy dream-sequence flashbacks, and children's portraiture. It softens harsh edges and creates an ethereal, angelic halo around the subject.

Feather Softness & Radius Tuning: The Art of Subtlety

The hallmark of amateur photo editing is a heavy, obvious vignette that looks like a black tunnel stamped over a photo. Professional vignetting is almost invisible: the viewer should feel its compositional effect without consciously noticing the filter.

Our tool provides decoupled controls for Radius and Feather Softness: • Large Radius + Wide Feather (Professional Default): Sets the clear inner radius to 60%–70% of the canvas and spreads the feather falloff over a wide boundary. Shading creeps in so gradually that viewers perceive the subject as naturally illuminated. • Tight Radius + Sharp Edge (Vintage Toy Camera): Simulates the aggressive, plastic-lens vignetting of vintage Holga, Lomo, and Diana toy cameras, ideal for retro urban photography and grunge aesthetics.

Synergy with Portrait Crop and Analog Film Grain

Vignetting reaches its peak expressive power when paired with other photographic finishing tools in our suite: • Portrait Perfection: Crop closely into your subject's face using Avatar Crop or Crop Image, apply a gentle warm tint with Color Tint, and apply a 15% dark vignette to draw mesmerizing focus into the eyes. • 1970s Analog Nostalgia: Apply our Sepia filter or Grayscale, inject 8% Gaussian film grain with Add Noise, and finish with a subtle dark vignette to simulate a 50-year-old medium-format print.

100% Client-Side In-Browser Security for Private Photography

Personal portrait sessions, family wedding photos, and confidential commercial product photography contain sensitive personal memories and proprietary business assets. Uploading high-resolution client galleries to third-party web servers introduces severe privacy hazards.

Our Add Vignette tool runs 100% locally inside your web browser. Built on HTML5 Canvas radial gradient shading algorithms, all pixel manipulation and gradient blending execute strictly within your device's sandboxed RAM. No photos or data ever travel across an external network connection, guaranteeing total privacy and complete compliance with GDPR and corporate security policies.

💡Professional Best Practices for Vignetting

  • •Subtlety is key: Increase intensity until the vignette is clearly visible, then dial it back by 30%—a professional vignette should be felt rather than seen.
  • •Darken to hide background clutter: If a portrait background contains distracting street signs or bright lights, a dark vignette gently pushes them into shadow.
  • •White vignette for romantic themes: Use a soft white vignette on wedding photos, newborn portraits, and high-key floral photography for a dreamy, ethereal glow.
  • •Elliptical shapes for widescreen photos: Our tool conforms the vignette to your image's aspect ratio, preventing circular clipping on 16:9 landscape captures.
  • •Combine with film grain: Pair a 15% dark vignette with subtle Gaussian noise from our Add Noise tool to recreate authentic vintage analog camera optics.
  • •Crop before adding vignette: If your subject is off-center, crop the photo first using Crop Image so the vignette frames the subject perfectly.
  • •Total client-side security: Enjoy the peace of mind of 100% in-browser processing—zero bytes or photos are ever sent to remote servers.

🛡️Technical Specifications & Canvas Radial Gradient Pipeline

The browser-native vignetting engine implements an accelerated Canvas 2D radial gradient compositing pipeline: 1. Image Ingestion & Coordinate Geometry: The source image is decoded onto an OffscreenCanvas of dimensions `[width, height]`. The optical center $(x_0, y_0)$ is established at `(width / 2, height / 2)`. The maximum corner radius is calculated via Euclidean hypotenuse: $R_{\max} = \sqrt{(W/2)^2 + (H/2)^2}$. 2. Radial Gradient Shading Mask: The engine creates a canvas radial gradient using `ctx.createRadialGradient(x_0, y_0, r_1, x_0, y_0, r_2)`, where $r_1 = R_{\max} \times \text{radius}$ defines the un-shaded core and $r_2 = R_{\max}$ defines the outer periphery. Gradient color stops transition smoothly from `rgba(R, G, B, 0)` at $r_1$ to `rgba(R, G, B, intensity)` at $r_2$. 3. Aspect-Ratio Transform: For non-square aspect ratios, the canvas context applies a non-uniform scaling transformation (`ctx.scale(1, height / width)`) prior to drawing the gradient, ensuring the vignette forms an ellipse proportional to the image frame. 4. Layer Compositing & Blob Export: The gradient is composited directly over the source image using standard alpha blending. The final canvas is serialized into a binary Blob via `canvas.toBlob()`, generating an instant local download link.

Stack: WebAssembly • Multi-threaded Web Workers • HTML5 Canvas API

Privacy: Files never leave your device or touch a cloud buffer; analytics run only with your consent.

Why choose client-side browser tools?

When you compress an image or merge a PDF on 2run tools, the code executes inside your browser tab using WebAssembly and Web Workers. We never stream your bytes to a remote cloud server. Your private financial reports, personal photos, and legal agreements never leave your device.

Total PrivacyIn-Browser
Instant ProcessingFast RAM
Truly UnlimitedZero Limits

Frequently Asked Questions

What is the purpose of adding a vignette to a photo?▾

A vignette gently darkens or lightens the outer edges of a photograph, reducing background distractions and naturally drawing the viewer's eyes toward the primary subject in the center.

What is the difference between a black and white vignette?▾

A black vignette darkens corners, creating cinematic drama, mood, and intimacy. A white vignette lightens corners, producing an ethereal, high-key, nostalgic halo often used in wedding and vintage photography.

Will the vignette look round or oval on rectangular photos?▾

Our tool automatically scales the vignette to match the aspect ratio of your image, creating a graceful elliptical falloff that complements widescreen, landscape, and portrait photos perfectly.

Can I position the vignette off-center if my subject is not in the middle?▾

If your subject is off-center, we recommend using our Crop Image tool first to position the subject in the visual center before applying the vignette.

Does adding a vignette reduce image quality or resolution?▾

No. The vignette is rendered directly at your image's full native resolution using smooth mathematical gradients, preserving 100% of your camera's original sharpness and detail.

Can I add vignettes on an iPhone or Android phone?▾

Yes! Our tool is fully mobile-responsive and executes locally inside mobile Safari, Chrome, and Firefox on iOS and Android devices.

Are my personal photos uploaded to any server?▾

No. All gradient rendering and canvas compositing take place 100% locally in your web browser. Your photos never leave your device.

Sites Loading Under 0.8s
100/100 Lighthouse web engineering
Audit
Dev Arm for Design Agencies
White-label • Bilateral NDA
Partner
Technical SEO by Code
Deep Schema • Zero waste
Scale SEO
Custom Web Apps & SaaS
100% code ownership • Edge scale
Build
Turn Traffic into Sales
+34% sales lift • Fix bottlenecks
Audit