Home
html-project

Image Background Removal Tool source code – HTML CSS JS with API

Fast online background remover tool using HTML, CSS & JS – remove image backgrounds easily.
Aaqib Amin
Image Background Removal Tool source code – HTML CSS JS with API

Looking for a simple and efficient way to remove image backgrounds online? Our background remover tool is a fully functional, website-ready solution built with HTML, CSS, and JavaScript. Whether you are a web developer, blogger, designer, or just someone who wants to edit images quickly, this tool makes background removal easy, fast, and professional. With support for JPG, PNG, and high-resolution images, it ensures your images are ready for presentations, social media, websites, or e-commerce platforms.

This HTML CSS JS remove background tool works without the need for installing any software or plugins. You can upload your image, wait a few seconds, and download the final result. The tool integrates smoothly into your website, giving users a seamless online background removal experience. Perfect for creating thumbnails, product images, portfolio images, or even personalized social media content.

Built with modern web technologies like flexbox, gradient buttons, tooltips, pulse animations, and responsive layouts, this tool is optimized for both desktop and mobile devices. It also uses API-based background removal, meaning the process is automated and accurate, delivering high-quality images in seconds. Keywords like “easy image background remover online,” “best free background eraser,” and “quick photo background removal” are naturally integrated for better search visibility.

Table of Contents

Features of Our Online Background Remover Tool

This remove.bg clone tool comes with multiple features to enhance user experience and make image editing online simple:

  • Fast Image Upload: Click the Upload Image button to select your JPG or PNG file, up to 5MB.
  • Automatic Background Removal: Powered by API integration, the background of your image is removed automatically.
  • Real-time Preview: Users can see their processed image instantly.
  • Download Options: Once processed, the image can be downloaded directly in high quality PNG format.
  • Responsive Design: Fully compatible with mobile, tablet, and desktop screens.

How This HTML CSS JS Tool Works

The tool leverages modern web technologies to create a smooth user experience. Here is a brief overview:

1. Copy HTML Structure code: The interface includes a file upload button, status message area, result image display, and download button.

<div class="rmbg">
  <div class="rmbg_input">
    <label for="file-input" class="img_input pulse tooltip">
      <svg viewBox="0 0 24 24">
        <title>upload</title>
        <path d="M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z" />
      </svg>
      Upload Image
      <span class="tooltiptext">Supports JPG, PNG up to 5MB</span>
    </label>
    <input type="file" id="file-input" accept="image/*" />
    <div class="upload-indicator"></div>
  </div>
  
  <div class="rmbg_wrapper">
    <div class="skeleton" style="display: none;"></div>
    <div class="status-message">Processing your image...</div>
    
    <div class="rmbg_result">
      <div class="row">
        <div class="col-1">
          <img id="result-image" src="" alt="Result Image" />
          <!-- Download Button under image -->
          <a id="download-button" class="below-img-btn" href="#" download>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 8px;">
              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
              <polyline points="7 10 12 15 17 10"></polyline>
              <line x1="12" y1="15" x2="12" y2="3"></line>
            </svg>
            Download
          </a>
        </div>
        <div class="col-2">
          <p>Your background-free image is ready! Click below to download.</p>
          <a id="download-button" href="#" download>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 8px;">
              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
              <polyline points="7 10 12 15 17 10"></polyline>
              <line x1="12" y1="15" x2="12" y2="3"></line>
            </svg>
            Download
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

2. Copy CSS Styling code: Stylish gradient buttons, hover effects, animations like pulse and skeleton loader, and a responsive layout.

.rmbg{font-family:'Poppins','Segoe UI',Roboto,sans-serif;max-width:850px;margin:40px auto;padding:25px;color:#222}
.rmbg_input{text-align:center;margin:40px 0;position:relative}
#file-input{display:none}
.img_input{display:inline-flex;align-items:center;justify-content:center;padding:14px 28px;background:linear-gradient(135deg,#4a6cf7 0%,#2541b2 100%);color:#fff;border-radius:60px;font-size:17px;font-weight:600;cursor:pointer;transition:all 0.35s ease;box-shadow:0 6px 18px rgba(74,108,247,0.4);border:none;position:relative;overflow:hidden}
.img_input:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 10px 28px rgba(74,108,247,0.55)}
.img_input svg{width:22px;height:22px;margin-right:10px;fill:white}
.rmbg_wrapper{position:relative;margin-top:20px;background:rgba(255,255,255,0.85);backdrop-filter:blur(12px);border-radius:16px;box-shadow:0 12px 32px rgba(0,0,0,0.1);overflow:hidden;transition:all 0.3s ease}
.rmbg_result{display:none;padding:0;position:relative}
.rmbg_result .row{display:flex;flex-wrap:wrap;margin:0}
.col-1{flex:0 0 70%;max-width:70%;padding:22px;text-align:center}
.col-2{flex:0 0 30%;max-width:30%;padding:25px;display:flex;flex-direction:column;justify-content:center;align-items:center;background:linear-gradient(180deg,#f9faff 0%,#eef1f7 100%);border-left:1px solid #e3e6f0}
#result-image{width:100%;height:auto;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,0.08);display:block;transition:transform 0.3s ease}
#result-image:hover{transform:scale(1.02)}
#download-button{display:none;padding:14px 28px;background:linear-gradient(135deg,#00c6ff 0%,#0072ff 100%);color:#fff;text-decoration:none;border-radius:60px;font-weight:600;font-size:16px;transition:all 0.3s ease;box-shadow:0 6px 18px rgba(0,114,255,0.4);margin-top:20px;border:none;cursor:pointer;text-align:center;display:inline-flex;align-items:center;justify-content:center}
#download-button:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 10px 28px rgba(0,114,255,0.6)}
.col-2 p{color:#4b5563;font-size:14px;line-height:1.6;text-align:center;margin-bottom:20px}
.skeleton{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,#f0f2f5 25%,#e5e8ec 50%,#f0f2f5 75%);background-size:200% 100%;animation:skeleton 1.5s ease-in-out infinite;z-index:10;border-radius:16px}
@keyframes skeleton{0%{background-position:200% 0}
100%{background-position:-200% 0}
}
@media (max-width:768px){.rmbg_result .row{flex-direction:column}
.col-1,.col-2{flex:0 0 100%;max-width:100%}
.col-2{padding:20px;border-left:none;border-top:1px solid #e5e8f2}
}
.status-message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,0.8);color:white;padding:12px 22px;border-radius:25px;font-size:15px;z-index:20;display:none;font-weight:500;letter-spacing:0.5px}
.upload-indicator{position:absolute;bottom:0;left:0;height:5px;background:linear-gradient(90deg,#4a6cf7 0%,#2541b2 100%);width:0%;border-radius:0 6px 6px 0;transition:width 0.3s ease}
.tooltip{position:relative;display:inline-block}
.tooltip .tooltiptext{visibility:hidden;width:200px;background-color:rgba(0,0,0,0.75);color:#fff;text-align:center;border-radius:8px;padding:8px 10px;position:absolute;z-index:1;bottom:125%;left:50%;transform:translateX(-50%);opacity:0;transition:opacity 0.3s;font-size:12px;backdrop-filter:blur(6px)}
.tooltip:hover .tooltiptext{visibility:visible;opacity:1}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(74,108,247,0.5)}
70%{box-shadow:0 0 0 12px rgba(74,108,247,0)}
100%{box-shadow:0 0 0 0 rgba(74,108,247,0)}
}
.pulse{animation:pulse 2.2s infinite}

2. Copy JavaScript Functionality Code: The JS handles file selection, sends the image to the background removal API, retrieves the processed image, and updates the download link dynamically.

// X-Api-Key
 const apiKey = 'EoTk15gWWQCjGaSFs8yYZPZS';
const _0x244663=_0x2c64;function _0x2d11(){const _0x3e8024=['BM9Uzq','yMXVyG','y2f0y2G','mJe3nteWmgfQww9iEa','zMLSzxm','y2XHC3nmAxn0','mti2mtC3m3fXrMDWBW','ue9tva','yxbWzw5K','mte0odqZmfn0EuzrAG','rxjYB3i6','Ahr0Chm6lY9HCgKUCMvTB3zLlMjNl3yXlJaVCMvTB3zLyMC','Aw1Hz2vFzMLSzq','nZm0mti0BMTVz3zK','y3jLyxrLt2jQzwn0vvjm','ywrKrxzLBNrmAxn0zw5LCG','y2HHBMDL','zxjYB3i','DgHLBG','yMXVy2S','ofDxAhDkrW','zgLZCgXHEq','yxv0BW','mJm2nZmZtLfjC2P5','zMXLEa','mtKXnZq2mxvJyMjKtq','mJberNjxDge','mZyWmZm5AvjcC0X5','C2TLBgv0B24','z2v0rwXLBwvUDej5swq','C3r5Bgu','C3jJ','AhjLzG','lNjTyMDFCMvZDwX0','nw1IAuXjqG','CxvLCNLtzwXLy3rVCG'];_0x2d11=function(){return _0x3e8024;};return _0x2d11();}function _0x2c64(_0x3a2f3a,_0x223c50){const _0x2d1176=_0x2d11();return _0x2c64=function(_0x2c64c4,_0x565f8a){_0x2c64c4=_0x2c64c4-0x14d;let _0x4e7e0e=_0x2d1176[_0x2c64c4];if(_0x2c64['guztQe']===undefined){var _0x5e818b=function(_0x484994){const _0x46c488='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=';let _0x20246a='',_0x248abe='';for(let _0x51e195=0x0,_0x12a456,_0xba4899,_0x6be0d4=0x0;_0xba4899=_0x484994['charAt'](_0x6be0d4++);~_0xba4899&&(_0x12a456=_0x51e195%0x4?_0x12a456*0x40+_0xba4899:_0xba4899,_0x51e195++%0x4)?_0x20246a+=String['fromCharCode'](0xff&_0x12a456>>(-0x2*_0x51e195&0x6)):0x0){_0xba4899=_0x46c488['indexOf'](_0xba4899);}for(let _0x5fa7c3=0x0,_0x5c85c9=_0x20246a['length'];_0x5fa7c3<_0x5c85c9;_0x5fa7c3++){_0x248abe+='%'+('00'+_0x20246a['charCodeAt'](_0x5fa7c3)['toString'](0x10))['slice'](-0x2);}return decodeURIComponent(_0x248abe);};_0x2c64['ZQHxxi']=_0x5e818b,_0x3a2f3a=arguments,_0x2c64['guztQe']=!![];}const _0x248c2c=_0x2d1176[0x0],_0x260974=_0x2c64c4+_0x248c2c,_0x3ab6bd=_0x3a2f3a[_0x260974];return!_0x3ab6bd?(_0x4e7e0e=_0x2c64['ZQHxxi'](_0x4e7e0e),_0x3a2f3a[_0x260974]=_0x4e7e0e):_0x4e7e0e=_0x3ab6bd,_0x4e7e0e;},_0x2c64(_0x3a2f3a,_0x223c50);}(function(_0x27233d,_0x18e545){const _0x34b767=_0x2c64,_0x22b76c=_0x27233d();while(!![]){try{const _0x5d1a21=-parseInt(_0x34b767(0x162))/0x1+-parseInt(_0x34b767(0x154))/0x2+parseInt(_0x34b767(0x15e))/0x3*(parseInt(_0x34b767(0x161))/0x4)+-parseInt(_0x34b767(0x169))/0x5*(-parseInt(_0x34b767(0x150))/0x6)+parseInt(_0x34b767(0x160))/0x7+-parseInt(_0x34b767(0x15b))/0x8*(parseInt(_0x34b767(0x14d))/0x9)+parseInt(_0x34b767(0x16e))/0xa;if(_0x5d1a21===_0x18e545)break;else _0x22b76c['push'](_0x22b76c['shift']());}catch(_0x36823a){_0x22b76c['push'](_0x22b76c['shift']());}}}(_0x2d11,0x33383));const fileInput=document[_0x244663(0x164)]('file-input'),downloadButton=document[_0x244663(0x164)]('download-button'),resultImage=document[_0x244663(0x164)]('result-image'),resultContainer=document[_0x244663(0x16a)](_0x244663(0x168)),handleFileUpload=()=>{const _0x37e8f4=_0x244663;let _0x484994=fileInput[_0x37e8f4(0x16f)][0x0],_0x46c488=new FormData();_0x46c488['append']('size',_0x37e8f4(0x15d)),_0x46c488[_0x37e8f4(0x14f)](_0x37e8f4(0x153),_0x484994),resultContainer[_0x37e8f4(0x165)]['display']=_0x37e8f4(0x16b),downloadButton[_0x37e8f4(0x165)][_0x37e8f4(0x15c)]=_0x37e8f4(0x16b),resultContainer[_0x37e8f4(0x170)]['add'](_0x37e8f4(0x163)),fetch(_0x37e8f4(0x152),{'method':_0x37e8f4(0x14e),'headers':{'X-Api-Key':apiKey},'body':_0x46c488})[_0x37e8f4(0x159)](_0x20246a=>_0x20246a[_0x37e8f4(0x16c)]())[_0x37e8f4(0x159)](_0x248abe=>{const _0x5d8ce8=_0x37e8f4;let _0x51e195=URL[_0x5d8ce8(0x155)](_0x248abe);resultImage[_0x5d8ce8(0x166)]=_0x51e195,downloadButton[_0x5d8ce8(0x165)][_0x5d8ce8(0x15c)]=_0x5d8ce8(0x15a),downloadButton[_0x5d8ce8(0x167)]=_0x51e195,resultContainer['classList']['remove'](_0x5d8ce8(0x163)),resultContainer[_0x5d8ce8(0x165)][_0x5d8ce8(0x15c)]=_0x5d8ce8(0x15f);})[_0x37e8f4(0x16d)](_0x12a456=>{const _0x11d9bc=_0x37e8f4;console[_0x11d9bc(0x158)](_0x11d9bc(0x151),_0x12a456);});};fileInput[_0x244663(0x156)](_0x244663(0x157),handleFileUpload);

Who Can Use This Tool?

This online background remover tool for website is suitable for everyone:

  • Web Developers: Integrate the tool into your portfolio or client projects.
  • Bloggers: Easily create clean images for blog posts and social media thumbnails.
  • Designers & Marketers: Quickly remove backgrounds from product photos or marketing images.
  • Students & Educators: Use for presentations, school projects, and educational content creation.

Advantages of Using This Tool

This tool comes with several benefits that make it stand out among free online background remover tools:

  • Completely browser-based; no installation required
  • Supports multiple file formats (JPG, PNG)
  • High-speed processing using API integration
  • Mobile-friendly and responsive interface
  • Clean, modern UI with gradient buttons, tooltips, and animations

How to Use the Tool Step-by-Step

  1. Click on the Upload Image button.
  2. Select the image you want to remove the background from (JPG or PNG).
  3. Wait a few seconds while the API processes the image (a loading skeleton will appear).
  4. Once processed, the result will be displayed along with a Download button.
  5. Click Download to save your background-free image.

Supported Programming & Technologies

This tool is built using:

  1. HTML5 – For the page structure, upload input, and result container
  2. CSS3 – For styling, hover effects, gradients, responsive design, animations
  3. JavaScript – Handles image upload, API requests, dynamic image preview, and download functionality
  4. API Integration – Connects to background removal services to process images automatically
Related Posts
How can I remove image backgrounds online for free?

You can use our HTML CSS JS background remover tool to instantly remove backgrounds from JPG or PNG images online without any software installation.

Does this tool support high-resolution images?

Yes, our tool supports high-resolution images, ensuring you get professional-quality output suitable for websites, presentations, and social media.

Can I use this background remover on mobile devices?

Absolutely. The tool is fully responsive and works smoothly on mobile, tablet, and desktop devices.

Do I need to install any software to use this tool?

No installation is required. The tool works completely in your browser using HTML, CSS, and JavaScript.

How fast is the background removal process?

The background removal is very fast thanks to API integration. Most images are processed in just a few seconds with real-time preview.

Note: This content was Edited with AI for clarity. Some images from external sources.

Final Thoughts

This HTML CSS JS online background remover tool is the perfect solution for anyone who needs a fast, reliable, and easy way to remove image backgrounds online. Whether you are building a website, designing social media graphics, or creating content for e-commerce, this tool simplifies your workflow. Integrating it into your website can enhance user engagement, provide added functionality, and give your visitors a professional image editing experience. Try it now and enjoy effortless image background removal online!

Post a Comment