Create stunning YouTube thumbnails with the text-behind-subject effect — all in your browser!

🚀 Try it live

LayerType is a free, browser-based thumbnail maker that lets you create professional-looking YouTube thumbnails with the popular "text behind subject" effect. No sign-up required, and all processing happens locally on your device — your images never leave your browser.

• Automatically separates the subject from the background using AI (RMBG-1.4)
• Smart edge refinement with feathering, trimming, and defringing
• Works entirely offline after the model downloads (~40MB one-time)

• Add multiple text layers (up to 20 total layers)
• "Behind Subject" toggle — place text behind your subject for that pro look
• 20+ YouTube-optimized fonts including Bebas Neue, Impact, Bangers, and more
• Full customization: size, color, stroke, shadow, rotation
• Drag to position anywhere on the canvas

• Popular emoji stickers (🔥 😱 🤯 💯 ⚡ and more)
• Vector shapes: arrows, circles, rectangles, speech bubbles, stars, hearts
• Customizable fill, stroke, and opacity
• All elements support the "Behind Subject" effect

• Add extra images to your thumbnail
• Remove backgrounds from additional images too!
• Layer them behind or in front of your subject

• Dim — darken the background for better text contrast
• Blur — add depth with background blur
• Tint — add color overlays with adjustable opacity
• Image adjustments: brightness, contrast, saturation

• Standard YouTube thumbnail size (1280×720)
• Export as high-quality PNG
• YouTube preview mode to see how it'll look

• Undo/Redo with full history (Ctrl+Z / Ctrl+Y)
• Keyboard shortcuts for fast editing
• Drag-and-drop layer reordering
• Duplicate layers (Ctrl+D)
• Nudge layers with arrow keys

Just visit vajradog.github.io/layertype — no installation needed!

# Clone the repository
git clone https://github.com/vajradog/layertype.git
cd layertype

# Install dependencies
npm install

# Start development server
npm run dev

The app will be available at http://localhost:5173

npm run build
npm run preview

1. Upload your image — drag & drop or click to browse
2. Separate layers — click to extract the subject from the background using AI
3. Add text — click "Add text layer" and customize your text
4. Toggle "Behind Subject" — enable this to place text behind your subject
5. Add shapes & stickers — use the left panel to add emojis or shapes
6. Adjust the background — use dim, blur, and tint for better contrast
7. Refine edges — if edges look rough, use Edge Refinement (✨) to smooth them
8. Export — download your thumbnail as a PNG

• Rough edges? Use the Edge Refinement controls to feather and trim edges
• Text not readable? Add a stroke and enable shadows
• Subject too small? Use the Subject Scale slider to adjust
• Need more contrast? Increase background dim or add a tint

• React 18 — UI framework
• Vite — Build tool
• Transformers.js — AI model inference in the browser
• RMBG-1.4 — Background removal model by BRIA AI
• Canvas API — Image rendering and export
• Web Workers — Non-blocking AI processing

Contributions are welcome! Feel free to:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

This project is licensed for personal, non-commercial use only.

You are free to use, modify, and learn from this code for personal projects. Commercial use, selling, or redistribution for profit is prohibited without permission.

See the LICENSE file for full terms.

Want to use LayerType commercially? Contact me for licensing options.

• Hugging Face Transformers.js for making AI accessible in the browser
• BRIA AI for the RMBG-1.4 model
• Google Fonts for the typography

Made with ❤️ by @vajradog

Found a bug? Have a feature request? Open an issue!