Create an Image Background Remover App Using HTML CSS & JavaScript Last Updated : 23 Jul, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report Building an Image Background Remover using HTML, CSS, and JavaScript demonstrates the power of combining these technologies to create interactive and user-friendly applications. The clean design and intuitive features make this tool not only functional but also enjoyable for users to interact with. The goal of our project is to provide users with a simple and intuitive interface for removing backgrounds from images. Approach: Start with a basic HTML structure that includes elements for image input, previews, and action buttons.In the CSS file, we've defined styles for the container, input file, image previews, and action buttons. The design focuses on clean lines, easy-to-read fonts, and interactive buttons.In the JavaScript file, we've implemented logic for handling image input, sending requests to the remove.bg API for background removal, and displaying the results. The user can also download the processed image with a single click.Example: The below code example illustrates the creation of image background remover app using HTML, CSS, and JavaScript. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title> Image Background Remover </title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <h1>Image Background Remover</h1> <div class="input-file"> <label for="userImg" class="info_text"> Select a File </label> <input type="file" id="userImg" class="form-control-file" required> </div> <div class="d-flex mb-4"> <div id="imagePreview" class="image-preview"></div> <div id="bgRemove" class="image-preview"></div> </div> <a id="downloadButton" class="btn btn-download" style="display: none;"> Download </a> <div> <button id="removeBackground" class="btn btn-primary"> Remove Background </button> </div> </div> <script src="script.js"></script> </body> </html> CSS /* Center content vertically and horizontally */ .container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 80vh; padding: 20px; border: 1px solid #0e0c0c; border-radius: 10px; max-width: 600px; margin: 0 auto; background-color: #e3f7f7; } /* Title styles */ h1 { text-align: center; margin-bottom: 20px; } /* Style input file button */ .input-file { margin-bottom: 20px; } /* Style image previews */ .image-preview { border: 2px solid #ccc; border-radius: 5px; margin-right: 10px; overflow: hidden; width: 200px; height: 200px; display: inline-block; } .image-preview img { width: 100%; height: 100%; } /* Style remove background button */ .btn-remove-bg { background-color: #007bff; color: #fff; border: none; border-radius: 5px; padding: 10px 20px; font-size: 16px; cursor: pointer; } .btn-remove-bg:hover { background-color: #0056b3; } JavaScript document.addEventListener('DOMContentLoaded', function () { const inputField = document.getElementById('userImg'); const removeBackgroundButton = document.getElementById('removeBackground'); const imagePreview = document.getElementById('imagePreview'); const bgRemove = document.getElementById('bgRemove'); const downloadButton = document.getElementById('downloadButton'); inputField.addEventListener('change', function () { const file = this.files[0]; const reader = new FileReader(); reader.onload = function (e) { const img = document.createElement('img'); img.src = e.target.result; imagePreview.innerHTML = ''; imagePreview.appendChild(img); } reader.readAsDataURL(file); }); removeBackgroundButton.addEventListener('click', async function () { const file = inputField.files[0]; const formData = new FormData(); formData.append('image_file', file); try { const response = await fetch('https://api.remove.bg/v1.0/removebg', { method: 'POST', headers: { 'X-Api-Key': '39nH2XMTcoAxnogxmqVBuAXH', }, body: formData, }); const result = await response.blob(); const imgUrl = URL.createObjectURL(result); bgRemove.innerHTML = `<img src="${imgUrl}" alt="Removed Background">`; downloadButton.href = imgUrl; downloadButton.download = 'background_removed_image.png'; downloadButton.style.display = 'inline-block'; } catch (error) { console.error('Error removing background:', error); } }); }); Output: Create an Image Background Remover App Using HTML CSS & JavaScript Comment More infoAdvertise with us Next Article Create a Single Page Application using HTML CSS & JavaScript A aakashya4h46 Follow Improve Article Tags : Project JavaScript Web Technologies Dev Scripter JavaScript-Projects Dev Scripter 2024 +2 More Similar Reads Create an Image Background Remover App Using React In this article, we will create an Image Background Remover App Using ReactJS. Image editing tools play a crucial role in various industries, from graphic design to e-commerce. One common task is removing backgrounds from images, a process that traditionally requires specialized software. we'll walk 4 min read How to create a Blur Mask Image Website using HTML CSS and JavaScript ? In this article, we will see how to create a website with a blur mask image using HTML, CSS, and JavaScript. Generally, we often see this kind of effect on many websites. When clicking the button, the box immediately becomes hidden, displaying the blurred content. The website is responsive and works 4 min read Create a Resize and Compress Images in HTML CSS & JavaScript While using the GeeksforGeeks Write Portal to write articles, we need to upload the images. As we need to resize the image as per GeeksforGeeks's requirement, we search for different tools and websites on the internet to resize and compress the image. But, as a web developer, we can create our own i 7 min read Create a Single Page Application using HTML CSS & JavaScript In this article, we are going to design and build a cool and user-friendly single-page application (SPA) using just HTML, CSS, and JavaScript. A single-page application contains multiple pages that can be navigated or visited without loading the page every time. This makes things faster and more int 4 min read Design Background color changer using HTML CSS and JavaScript Background color changer is a project which enables to change the background color of web pages with ease. There are color boxes on a web page when the user clicks on any one of them, then the resultant color will appear in the background of the web page. It makes web pages look attractive.File stru 3 min read How to randomly change image color using HTML CSS and JavaScript ? In this article, we will create a webpage where we can change image color randomly by clicking on the image using HTML, CSS, and JavaScript. The image color will change randomly using the JavaScript Math random() function.Approach:First of all select your image using HTML <img> tag.In JavaScri 2 min read Like