Vignette Effect

Workflow & Usage

1. Add your images
   Drag & drop, paste, or click to select JPEG, PNG, or WebP files. Previews load instantly with EXIF orientation applied.

2. Choose your vignette style

   • Adjust Strength (0–100%) for the amount of shading.
   • Pick any color for the vignette — from classic black to expressive tints.
   • Or click the Dark vignette preset for a clean photographic look.

3. Fine-tune each image (optional)
   Click Edit to adjust vignette strength per image.
   Perfect for bright vs. dark photos that need different treatment.

4. Select your batch
   Include or exclude individual files from the ZIP export. Remove items you don’t need.

5. Export

   • Single file: Download with one click.
   • All files: Download a ZIP with your vignette-applied images.
     All exports preserve the original image format.

All processing stays local on your device. No logins, no uploads, no tracking.

Use Cases

• Photography & portraits
  Add depth, mood, or soft edge shading to guide the viewer’s eye.

• Social media graphics
  Create warm or cool color washes around edges for a consistent brand feel.

• Blog & article images
  Subtle vignettes help text overlays stand out without heavy editing.

• Marketing and landing pages
  Direct attention toward product centers or hero subjects.

• Creative filters
  Experiment with unconventional tints for stylized, cinematic looks.

Tips for Best Results

• Start with the dark preset.
  It gives a great baseline for most images — then adjust color or strength if needed.

• Use soft colors for subtle mood.
  Warm browns, cool blues, or low-saturation tones create gentle atmospheres.

• Avoid high strength on detailed photos.
  Heavy vignettes can overpower textures; keep it below 50% for natural edits.

• Match your brand palette.
  Try entering your brand’s hex colors to make images feel unified across your site.

• Combine with other tools.
  After applying a vignette, use Image Compressor or
  Progressive JPEG Converter to optimize your exports.

How It Works

• Canvas-based gradient rendering
  A radial gradient is drawn from the center outward, blending from transparent to your chosen color at the edges.

• EXIF-aware decoding
  Images load with correct orientation using createImageBitmap({ imageOrientation: 'from-image' }).

• Full-resolution output
  The vignette is rendered on a separate high-resolution canvas to preserve clarity.

• Original format preserved
  JPEG stays JPEG, PNG stays PNG — no unintended conversion.

• Completely local processing
  Everything runs in your browser via the Canvas API. Nothing is uploaded.