.png){kind=small}
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!
Source: https://codenest12.blogspot.com/2025/04/free-background-remover-tool-script-for.html?m=1
<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>© 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>
Source: https://codenest12.blogspot.com/2025/04/free-background-remover-tool-script-for.html?m=1
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
Source: https://codenest12.blogspot.com/2025/04/free-background-remover-tool-script-for.html?m=1