Please bookmark this page to avoid losing your image tool!

Image Gloomy Effect Editor

(Free & Supports Bulk Upload)

Drag & drop your images here or

The result will appear here...
You can edit the below JavaScript code to customize the image tool.
function processImage(originalImg, desaturation = 0.7, brightness = -0.15, coolTone = 0.2, vignette = 0.6) {
    // Create a canvas element to draw the new image on
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Get the dimensions of the original image
    const w = originalImg.naturalWidth;
    const h = originalImg.naturalHeight;

    // Set the canvas dimensions to match the image
    canvas.width = w;
    canvas.height = h;

    // --- Step 1: Apply core gloom effect using filters ---
    // The context.filter property works like CSS filters and is often hardware accelerated.
    // We combine saturation and brightness adjustments here.
    const saturationValue = Math.max(0, 1 - desaturation);
    const brightnessValue = Math.max(0, 1 + brightness);

    ctx.filter = `saturate(${saturationValue}) brightness(${brightnessValue})`;

    // Draw the image onto the canvas with the filters applied
    ctx.drawImage(originalImg, 0, 0, w, h);

    // Reset the filter so subsequent drawing operations are not affected
    ctx.filter = 'none';

    // --- Step 2: Apply a cool color tone overlay ---
    // This adds a blue-ish tint to the image.
    if (coolTone > 0) {
        // The 'overlay' blend mode works well for tinting, as it interacts with the
        // existing lights and darks of the image.
        ctx.globalCompositeOperation = 'overlay';
        // A muted, dark cyan/blue color. The alpha is controlled by the coolTone parameter.
        ctx.fillStyle = `rgba(0, 100, 150, ${coolTone})`;
        ctx.fillRect(0, 0, w, h);
        // Reset the composite operation for the next step
        ctx.globalCompositeOperation = 'source-over';
    }

    // --- Step 3: Apply a vignette effect ---
    // This darkens the corners of the image, drawing focus to the center.
    if (vignette > 0) {
        const centerX = w / 2;
        const centerY = h / 2;

        // The inner radius defines the start of the vignette gradient (the clear area).
        // It's scaled by the smaller of the width or height to look good on non-square images.
        const innerRadius = Math.min(centerX, centerY) * (1 - vignette);

        // The outer radius should extend to the corners to cover the entire image.
        const outerRadius = Math.sqrt(centerX * centerX + centerY * centerY);

        // Create a radial gradient from the center outwards
        const gradient = ctx.createRadialGradient(centerX, centerY, innerRadius, centerX, centerY, outerRadius);

        // The center of the gradient is transparent
        gradient.addColorStop(0, 'rgba(0, 0, 0, 0)');
        // The edge is dark. The vignette parameter controls the final darkness.
        gradient.addColorStop(1, `rgba(0, 0, 0, ${Math.min(1, vignette)})`);

        // Apply the gradient over the entire canvas
        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, w, h);
    }

    // Return the final canvas element
    return canvas;
}

Free Image Tool Creator

Can't find the image tool you're looking for?
Create one based on your own needs now!

Description

The Image Gloomy Effect Editor is a web-based tool that allows users to enhance their images by applying a gloomy and atmospheric effect. Users can adjust parameters such as desaturation, brightness, and cool tone to create a moody atmosphere in their images. Additionally, a vignette effect can be applied to draw focus to the center of the image by darkening the corners. This tool is particularly useful for photographers, graphic designers, and social media enthusiasts looking to stylize their images for artistic or dramatic presentations.

Leave a Reply

Your email address will not be published. Required fields are marked *

Other Image Tools:

Image Japanese Anime-Style Generator

3D Cartoon Style Image Creator

Image To Pixel-Style Converter

Image Black And White HUD Style With VHS Effects

Black and White MQ1 Reaper Drone Targeting Pod Image

Image Filter for MQ1 Reaper Drone Targeting Pod

Image Hyper-Realistic Portrait Triptych Generator

Image To Professional Architectural Render Blueprint Converter

Image Ultraviolet Camera Filter

Image Portrait Generator with Warm Golden Hour Lighting

Image Softly Lit Portrait Generator

Image Petal Count Identifier

Image Ball Creator

Image To CAD-Style Blueprint Converter

Image To Blueprint CAD Style Converter

Image To Clean CAD Blueprint Generator

Image To CAD Blueprint Generator

Image To Technical Blueprint Style Converter

Image To Blueprint-Style Drawing Converter

Image To Technical Blueprint Converter

Architectural Plan to Technical Blueprint Image Converter

Architectural Plan To Blueprint-Style Image Converter

Image To Blueprint Architectural Style Converter

Image Background Replacement To White

Image To Dot Outline Converter

Image To Vertical Halftone Converter

Image Transparent Hologram Effect Generator

Image Blue Twilight Filter Applicator

Image Golden Ratio Spiral Generator for A4

Photo Black and White Floyd-Steinberg Dithering for Acrylic Engraving

Image Cover Texture Generator

Image Arabic Text Overlay Tool

Image Arabic Style Enhancer

Arabic Style Image Designer

Image Heart Music Note Creator

Image CRT Lens Effect Enhancer for Nostalgic Wallpaper Design

See All →