"Hey! It’s under maintenance right now, coming soon!
Home
JavaScript
Tools

Free Background Remover Tool Script for blogger

Estimated read time: 9 min
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

Hello! Welcome to CodeNest.

If you want to add free background remover tool on blogger website then this post is just for you.

Free-Background-Remover-Tool-Script-for-blogger

Removing image backgrounds has never been easier! With this simple and professional Online Background Remover Tool, you can easily remove the background from any image in just seconds.

What is a Background Remover Tool?

A background remover tool is a web-based utility that allows users to automatically remove the background from an image, usually leaving the main subject intact. It’s especially useful for e-commerce product images, profile pictures, social media content, or any project where you want a clean and professional look without any distractions in the background.

How It Works

This tool uses the powerful Remove.bg API behind the scenes. Remove.bg is an advanced AI service that detects the subject of your image and removes the background automatically, with high accuracy.

You can see the demo⤵

View Demo

Features

  1. Upload JPG or PNG image (any size)
  2. Instantly process and remove background
  3. Shows both original and background removed previews
  4. One-click Free Download of transparent image (PNG)
  5. Fully responsive on mobile and desktop
  6. Your image is not saved – it's processed securely

How to Use

  1. Click on the Upload Image button.
  2. Select your JPG or PNG photo.
  3. Wait a few seconds while the AI removes the background.
  4. Click the Download button to save your new transparent image.

Powered by Remove.bg API

We’ve integrated remove.bg API to deliver fast, accurate results. You don’t need any software or skills — everything happens automatically in your browser!

Easy steps to add Background Remover Tool

Step 1: First of all Login to your Blogger Dashboard.

Step 2: On Blogger Dashboard, click Pages.

Step 3: Either create a new page by clicking on icon or click on the existing page to add codes there.

Step 4: Switch to HTML view.

Step 5: Paste the following codes in it

html
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>BGXpert - Background Remover</title>
  <style>
    #mobile-menu,mobile-menu,.main-wrapper, mobile-menu,.breadcrumbs,.postTitle, .itm,footer, header,.headIn,.navIn,.navbar,.ntfC,.ancrCn{display:none}#qEdit.blog-admin.qEdit,.brdCmb,#backTop.toTopB.nBtm.vsbl,.mnBr,#notif-widget.section,.blogMn,.wvC,.adB,#LinkList001,.ancrC{display:none;}
#link a{text-decoration:none}
    
    /*body {
      margin: 0;
      font-family: 'Segoe UI', sans-serif;
      background: #f1f5f9;
      color: #111827;
    }*/

    main {
      padding: 30px 20px;
      max-width: 1000px;
      margin: auto;
      text-align: center;
    }

    h2 {
      margin-bottom: 20px;
      font-size: 22px;
    }

    input[type="file"] {
      display: none;
    }

    .upload-btn {
      background: linear-gradient(to right, #3b82f6, #2563eb);
      color: white;
      padding: 12px 24px;
      font-weight: bold;
      font-size: 16px;
      border: none;
      border-radius: 12px;
      cursor: pointer;
      margin: 10px;
      transition: all 0.3s ease;
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }

    .upload-btn:hover {
      opacity: 0.9;
      transform: scale(1.03);
    }

    #loading {
      display: none;
      margin-top: 20px;
      font-weight: bold;
    }

    .image-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 30px;
      margin-top: 30px;
    }

    .image-box {
      flex: 1 1 300px;
      text-align: center;
    }

    .image-box img {
      width: 100%;
      max-width: 300px;
      border-radius: 10px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.1);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
    }

    .download-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin: 20px auto 0;
      padding: 12px 24px;
      background: linear-gradient(to right, #16a34a, #15803d);
      color: #fff;
      border-radius: 10px;
      text-decoration: none;
      font-size: 15px;
      font-weight: bold;
      text-align: center;
    }

    .download-container {
      text-align: center;
    }

    .download-btn:hover {
      opacity: 0.9;
    }

    /*footer {
      text-align: center;
      padding: 20px;
      background: #111827;
      color: #fff;
      margin-top: 50px;
    }*/

    @media (max-width: 768px) {
      .image-grid {
        flex-direction: column;
        align-items: center;
      }
    }

    .btn-icon {
      width: 18px;
      height: 18px;
    }
  </style>
</head>
<body>

  <main>
    <h2><span style="color: #2b00fe; font-size: x-large;">Professional Background Remover</span></h2>
<h2>Upload any image (JPG, PNG) to remove background</h2>
    
    <label class="upload-btn" for="fileInput">
      <!-- Upload SVG -->
      <svg class="btn-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a2 2 0 002 2h12a2 2 0 002-2v-1M12 12V4m0 0L8 8m4-4l4 4"/>
      </svg>
      Upload Image
    </label>
    <input type="file" id="fileInput" accept="image/*">

    <div id="loading">Processing image, please wait...</div>

    <div class="image-grid" id="result"></div>
  </main>

  <footer>
    <p>&copy; 2025 BGXpert - All Rights Reserved</p>
  </footer>

  <script>
    const fileInput = document.getElementById('fileInput');
    const loading = document.getElementById('loading');
    const result = document.getElementById('result');

  const API_KEY = 'YOUR_REMOVE_BG_API_KEY'; // Replace with your own

    fileInput.addEventListener('change', async () => {
      const file = fileInput.files[0];
      if (!file) return;

      result.innerHTML = '';
      loading.style.display = 'block';

      const originalImgURL = URL.createObjectURL(file);

      const formData = new FormData();
      formData.append('image_file', file);
      formData.append('size', 'auto');

      const response = await fetch('https://api.remove.bg/v1.0/removebg', {
        method: 'POST',
        headers: {
          'X-Api-Key': API_KEY
        },
        body: formData
      });

      const blob = await response.blob();
      loading.style.display = 'none';

      if (blob.type.startsWith('image')) {
        const removedImgURL = URL.createObjectURL(blob);

        result.innerHTML = `
          <div class="image-box">
            <h3>Original Image</h3>
            <img src="${originalImgURL}" alt="Original" />
          </div>
          <div class="image-box">
            <h3>Without Background</h3>
            <img src="${removedImgURL}" alt="No Background" />
            </enter><div class="download-container">
              <a href="${removedImgURL}" download="no-bg.png" class="download-btn">
                <!-- Download SVG -->
                <svg class="btn-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a2 2 0 002 2h12a2 2 0 002-2v-1M12 12V4m0 8l-4-4m4 4l4-4" />
                </svg>
                Free Download
              </a>
            </div>
          </div></center>
        `;
      } else {
        result.innerHTML = `<p style="color:red;">Error: Background removal failed.</p>`;
      }
    });
  </script>

</body>
</html>

Step 6: Go to remove.bg

Step 7: Sign up and get your API key.

Step 8: Replace this line in the code. 

  const API_KEY = 'YOUR_REMOVE_BG_API_KEY'; // Replace with your own
  const API_KEY = 'pPrZrbWLgKKg8LgupBksLkt4'; // Replace with your own

Step 9: Save or Publish

That's done!

Get your remove.bg API key? – Watch now!

Youtube video

Conclusion

This tool makes background removal super easy and fast. Just upload an image, and download the transparent version in seconds no editing skills needed.

Perfect for blogs, websites, and personal use. Add it to your site in minutes and let your users enjoy it for free!

If you are facing any problem, don't hesitate. Join our Tech Ankur group.

Copyright:
©CodeNest

Go to Link

About the Author

Hey! Im Ankur Kumar, I am a professional part time blogger. Here we share informative and technical information. This blog is made to teach you something new. Buy Me a Coffee
#JavaScript #Tools

2 comments

  1. second ago
    This is Quantity Content! Thank You For Providing
    1. second ago
      Stay Connected
Please don't share any sensitive or personal details here.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.