🚀 Web Tool
Free Mockup Generator
Place your designs onto any photo. Upload a background, define the perspective, and automatically warp your artwork to fit screens, frames, and billboards.
Why You Need a Mockup Tool
Professional mockups make your designs look real. Whether you need to show a website on a laptop screen, a poster on a wall, or an app on a phone, you usually need complex software like Photoshop to warp the image correctly. HowToAny Mockup Generator simplifies this. Just upload any photo of a screen or frame, drag the four corners to match the perspective, and drop in your design. The tool automatically skews and fits your artwork to look 3D and realistic.
Upload Background
Drop a base image (mockup photo) into the “Background” zone. This could be a photo of a phone, a computer, or a blank sign.
Upload Artwork
Drop your design (screenshot, logo, or poster) into the “Artwork” zone. You can upload multiple designs at once.
Set Perspective
Drag the four corners of the green box to match the corners of the screen or frame in your background photo.
Download
The tool warps your artwork to fit the shape instantly. Click “Download All” to save the final realistic mockup images.
Perspective Warp
Create true 3D effects. Our engine stretches and skews your flat design to match the angle and depth of your background photo.
Any Background
You aren’t limited to our templates. Use any photo you own—a picture of your desk, a stock photo, or a friend’s phone—as a mockup.
Batch Generation
Set up the perspective once, then process 50 different designs instantly. Perfect for creating a portfolio or product catalog.
Smart Blending
Choose between “Front” (overlay) or “Back” (behind) layering, and add subtle drop shadows to make the placement look natural.
Frequently Asked Questions
Zoom in on the preview if needed. Click and drag each of the four green corner handles until they align exactly with the corners of the device screen or frame in your background image. The artwork will update in real-time.
Free mode allows you to move each corner independently to create perspective (e.g., a screen tilted away from you). Rectangle mode keeps the shape rectangular, which is useful for flat, front-facing mockups.
Yes. If your background image has a transparent window (like a cut-out frame), select the 'Back (behind)' layer option. This will render your artwork underneath the background image.
You can use JPG, PNG, or WebP files for both the background and the artwork. For the best quality, we recommend using high-resolution images.
Yes. The perspective warping calculation happens entirely in your browser using HTML5 Canvas. Your custom background photos and designs are never uploaded to a server.
