---
layout: default
title: Remove Background - Free Background Remover Tool
description: Automatically remove solid color backgrounds from images. Works best with white, solid color, or uniform backgrounds. Free and private.
---

<link rel="stylesheet" href="../shared/tool-layout.css">
<style>
.settings-panel {
    background: var(--card-bg, #f8f9fa);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.settings-info {
    background: #f3e8ff;
    border-left: 4px solid #9333ea;
    padding: 12px 16px;
    margin-bottom: 20px;
    border-radius: 4px;
    color: #6b21a8;
}

.settings-info svg {
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
}

.slider-group {
    margin: 20px 0;
}

.slider-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-primary, #212529);
}

.slider-group input[type="range"] {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: #e9ecef;
    outline: none;
    -webkit-appearance: none;
}

.slider-group input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #4f46e5;
    cursor: pointer;
}

.slider-group input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #4f46e5;
    cursor: pointer;
    border: none;
}

.slider-value {
    display: inline-block;
    margin-left: 10px;
    font-weight: 600;
    color: #4f46e5;
}

.preview-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 20px 0;
}

@media (max-width: 768px) {
    .preview-container {
        grid-template-columns: 1fr;
    }
}

.preview-box {
    text-align: center;
}

.preview-box h3 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--text-secondary, #6c757d);
}

.preview-canvas {
    max-width: 100%;
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 8px;
    background:
        linear-gradient(45deg, #ccc 25%, transparent 25%),
        linear-gradient(-45deg, #ccc 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #ccc 75%),
        linear-gradient(-45deg, transparent 75%, #ccc 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

@media (max-width: 768px) {
    .preview-container {
        grid-template-columns: 1fr;
    }
}
</style>

<div class="tool-container">
    <div class="tool-header">
        <h1>Remove Background</h1>
        <p class="tool-description">Automatically remove solid color backgrounds from images. Perfect for product photos, portraits, and graphics.</p>
    </div>

    <div id="uploadSection" class="upload-section">
        <div class="drop-zone" id="dropZone">
            <svg class="upload-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12"></path>
            </svg>
            <h2>Drop image here</h2>
            <p>or click to browse</p>
            <input type="file" id="fileInput" accept="image/*" style="display: none;">
            <button class="btn-primary" onclick="document.getElementById('fileInput').click()">
                Select Image
            </button>
        </div>
    </div>

    <div id="settingsSection" class="settings-section" style="display: none;">
        <div class="settings-panel">
            <h2>SETTINGS</h2>

            <div class="settings-info">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <circle cx="12" cy="12" r="10"></circle>
                    <line x1="12" y1="16" x2="12" y2="12"></line>
                    <line x1="12" y1="8" x2="12.01" y2="8"></line>
                </svg>
                Automatically removes solid color backgrounds. Works best with images that have white, solid color, or uniform backgrounds.
            </div>

            <div class="slider-group">
                <label for="toleranceSlider">
                    Color Tolerance
                    <span class="slider-value" id="toleranceValue">30</span>
                </label>
                <input type="range" id="toleranceSlider" min="1" max="100" value="30">
                <p style="font-size: 12px; color: #6c757d; margin-top: 5px;">
                    Higher values remove more similar colors (may remove parts of subject)
                </p>
            </div>

            <div class="slider-group">
                <label for="smoothnessSlider">
                    Edge Smoothness
                    <span class="slider-value" id="smoothnessValue">2</span>
                </label>
                <input type="range" id="smoothnessSlider" min="0" max="5" value="2">
                <p style="font-size: 12px; color: #6c757d; margin-top: 5px;">
                    Smooths edges to reduce jaggedness
                </p>
            </div>

            <button id="processBtn" class="btn-primary" style="width: 100%; padding: 16px; font-size: 16px;">
                PROCESS NOW
            </button>
            <p style="text-align: center; font-size: 12px; color: #6c757d; margin-top: 10px;">
                Processed locally in your browser
            </p>
        </div>

        <div id="previewSection" style="display: none;">
            <div class="preview-container">
                <div class="preview-box">
                    <h3>ORIGINAL</h3>
                    <canvas id="originalCanvas" class="preview-canvas"></canvas>
                </div>
                <div class="preview-box">
                    <h3>RESULT</h3>
                    <canvas id="resultCanvas" class="preview-canvas"></canvas>
                </div>
            </div>

            <div class="button-group">
                <button id="downloadBtn" class="btn-primary">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"></path>
                    </svg>
                    Download PNG
                </button>
                <button onclick="location.reload()" class="btn-secondary">Process Another</button>
            </div>
        </div>
    </div>

    <div class="info-section">
        <div class="info-card">
            <h3>How It Works</h3>
            <ol>
                <li>Upload an image with a solid or uniform background</li>
                <li>Tool automatically detects background color from corners</li>
                <li>Adjust tolerance to fine-tune removal</li>
                <li>Download PNG with transparent background</li>
            </ol>
        </div>

        <div class="info-card">
            <h3>Best Results</h3>
            <ul>
                <li>White or solid color backgrounds</li>
                <li>Clear contrast between subject and background</li>
                <li>Uniform lighting without shadows</li>
                <li>Product photos and graphics</li>
            </ul>
        </div>

        <div class="info-card">
            <h3>Privacy & Security</h3>
            <ul>
                <li>100% client-side processing</li>
                <li>Images never uploaded to servers</li>
                <li>No data collection or tracking</li>
                <li>Works offline after first load</li>
            </ul>
        </div>

        <div class="info-card warning">
            <h3>⚠️ Limitations</h3>
            <p>This tool works best with solid, uniform backgrounds. Complex backgrounds with gradients, patterns, or multiple colors may not be removed cleanly. For complex backgrounds, consider using a professional photo editing tool with AI-powered removal.</p>
        </div>
    </div>
</div>

<script src="../shared/tool-utils.js"></script>
<script src="tool.js"></script>