Please bookmark this page to avoid losing your image tool!

Image Gold Emblem Creator

(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.
/**
 * Converts an image with a transparent background into a gold emblem.
 * The effect works best on images with clear silhouettes (like icons or logos).
 *
 * @param {Image} originalImg The original Image object, which should have transparency.
 * @param {string} color1 The darkest shade of gold for the emblem's shadows.
 * @param {string} color2 The mid-tone shade of gold.
 * @param {string} color3 The lightest shade of gold for the highlights.
 * @param {number} intensity Controls the perceived depth/thickness of the emblem's bevel.
 * @param {number} blur Controls the softness of the shadows and highlights on the bevel.
 * @returns {HTMLCanvasElement} A canvas element displaying the golden emblem.
 */
function processImage(originalImg, color1 = '#B8860B', color2 = '#FFD700', color3 = '#FFFFE0', intensity = 5, blur = 4) {
    const {
        width,
        height
    } = originalImg;

    // 1. Create the final canvas
    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');

    // Helper function to create a monochrome silhouette of the image.
    // This is used to create the shadow and highlight masks.
    const createShapeCanvas = (color) => {
        const shapeCanvas = document.createElement('canvas');
        shapeCanvas.width = width;
        shapeCanvas.height = height;
        const shapeCtx = shapeCanvas.getContext('2d', { willReadFrequently: true });
        shapeCtx.drawImage(originalImg, 0, 0);
        shapeCtx.globalCompositeOperation = 'source-in';
        shapeCtx.fillStyle = color;
        shapeCtx.fillRect(0, 0, width, height);
        return shapeCanvas;
    };

    // Create white and black versions of the input image's shape
    const whiteShape = createShapeCanvas('white');
    const blackShape = createShapeCanvas('black');

    // 2. Fill the canvas with a base gold gradient
    // This simulates a light source from the top-left
    const gradient = ctx.createLinearGradient(0, 0, width, height);
    gradient.addColorStop(0, color3); // Lightest color (top-left)
    gradient.addColorStop(0.5, color2); // Mid-tone color
    gradient.addColorStop(1, color1); // Darkest color (bottom-right)
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, width, height);

    // 3. Add the 3D bevel effect using blurred highlights and shadows.
    // We apply the blur filter to the context, which will affect all subsequent drawing operations.
    ctx.filter = `blur(${blur}px)`;

    // Draw the shadow layer.
    // 'multiply' blend mode darkens the base layer where the new layer is dark.
    // We draw the black shape offset to the bottom-right to create the shadow.
    ctx.globalCompositeOperation = 'multiply';
    ctx.drawImage(blackShape, intensity, intensity);

    // Draw the highlight layer.
    // 'lighter' (or 'screen') blend mode brightens the base layer where the new layer is light.
    // We draw the white shape offset to the top-left to create the highlight.
    ctx.globalCompositeOperation = 'lighter';
    ctx.drawImage(whiteShape, -intensity, -intensity);

    // 4. Add a sharp inner highlight to give the edge a hard, metallic feel.
    // We reset the filters to draw a sharp, un-blurred line.
    ctx.filter = 'none';
    const edgeIntensity = Math.ceil(intensity / 2);
    // We keep the 'lighter' blend mode to add this sharp highlight on top.
    ctx.drawImage(whiteShape, -edgeIntensity, -edgeIntensity);

    // 5. Mask the entire textured canvas with the original image's shape.
    // 'destination-in' keeps the existing canvas content ONLY where the new image is opaque.
    // This effectively cuts out our gold texture into the final shape.
    ctx.globalCompositeOperation = 'destination-in';
    ctx.drawImage(originalImg, 0, 0);

    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 Gold Emblem Creator is a tool designed to transform images with transparent backgrounds into visually striking gold emblems. Ideal for use with clear silhouette images such as icons, logos, or badges, this tool applies a gold gradient and a 3D bevel effect to enhance depth and visual appeal. Users can customize the gold shades and control parameters such as intensity and blur to tailor the emblem’s appearance to their needs. This can be particularly useful for graphic designers, content creators, and businesses looking to create distinctive branding elements or stylish visual assets.

Leave a Reply

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