An AI-powered background removal tool built with React and Vite. Instantly remove backgrounds from your images with professional-quality results.
- AI-Powered Background Removal: Uses advanced AI to automatically detect and remove image backgrounds
- Drag & Drop Interface: Simply drag and drop your images or click to upload
- Real-time Preview: See original and processed images side-by-side
- Zoom Controls: Zoom in/out to inspect details
- Background Toggle: Switch between transparent and colored backgrounds for preview
- Multiple Format Support: Supports JPG, PNG, and WEBP formats
- Fast Processing: Get results in seconds
- Responsive Design: Works seamlessly on desktop and mobile devices
- Modern UI: Beautiful gradient design with smooth animations
- Frontend: React 19.1.1
- Build Tool: Vite 7.1.2
- Styling: TailwindCSS 4.1.12
- Animations: Framer Motion 12.23.12
- Background Removal: @imgly/background-removal 1.7.0
- Development: ESLint, TypeScript types
-
Clone the repository
git clone https://github.com/your-username/background-remover.git cd background-remover -
Install dependencies
npm install
-
Start the development server
npm run dev
-
Open your browser Navigate to
http://localhost:5173(or the port shown in your terminal)
npm run dev- Start the development server with hot reloadnpm run build- Build the project for productionnpm run preview- Preview the production build locallynpm run lint- Run ESLint to check for code issues
- Upload an Image: Drag and drop an image file or click the upload area
- Wait for Processing: The AI will automatically remove the background
- Preview Results: View the original and processed images side-by-side
- Adjust View: Use zoom controls and background toggle for better inspection
- Download: Click "Download Result" to save your image with transparent background
- JPEG/JPG
- PNG
- WebP
- Optimal: 1-5 MB
- Maximum: 10 MB
- For best results, use high-quality images with clear subjects
The app uses TailwindCSS for styling. You can customize the appearance by modifying:
- Color schemes in
src/App.jsx - Tailwind configuration in your project setup
- Animation settings using Framer Motion props
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the project
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Imgly Background Removal for the AI background removal technology
- TailwindCSS for the utility-first CSS framework
- Framer Motion for smooth animations
- Vite for the fast build tool