How to use the clay device mockup generator
This clay device mockup tool helps product teams and designers create minimalist 3D visuals quickly. Use it when you want your interface to stay the focus while still presenting it in a polished hardware context.
- 1
Upload your app screenshot (or demo)
Add a PNG or JPG from Figma, Xcode, or ASO drafts — or tap Try demo UI. Everything stays local; nothing uploads to a server.
- 2
Tune clay color and matte
Pick porcelain, lilac, mint, and more — or any hex. Use the Clay matte slider to swing between chalky soft and slightly waxier highlights (physical sheen).
- 3
Preset angle, screen fit, orbit
Studio, Hero, or Showcase sets the base pose; drag to refine. Cover fills the display; Contain keeps your whole screenshot visible.
- 4
Export studio or transparent PNG
Choose preview vs export background — including alpha PNG for compositing. Downloads scale up to 3840 px on the long edge.
Why clay mockups perform well for product marketing
Clay device mockups reduce visual complexity compared with photoreal renders. This keeps user attention on your interface and messaging while still signaling platform context, which is useful for landing pages and App Store creative sets.
Features built for fast design workflows
- Matte clay material with adjustable roughness + sheen
- Rounded chassis, bezel frame, soft side bump detail
- Studio / Hero / Showcase angles + orbit + reset camera
- Cover / contain · preview vs export backgrounds · transparent PNG
- Try demo UI · HDR lighting · contact shadow
- 3840 px long-edge export · 100% in-browser
Recommended source sizes for cleaner results
Use high-resolution source screenshots to avoid softness after 3D perspective mapping. Export larger than needed, then resize for each platform.
| Use case | Suggested size |
|---|---|
| App screen source | 1080x1920 or larger |
| Website hero creative | 1600 px+ long edge |
| Master campaign asset | Export 4K and downscale per channel |
Clay mockup workflow tips for teams
Build a reusable creative system by standardizing angle, color family, and background treatment across screenshots. This makes your launch page and store visuals feel cohesive.
Generate 2-3 angle variants from the same screenshot and run tests in paid channels to identify the highest-converting composition.
Frequently asked questions
What is a clay device mockup?
A clay mockup is a simplified, soft-edged device style that emphasizes your UI content while keeping visual noise low.
Is this clay mockup generator free?
Yes. The generator is free to use and exports watermark-free PNG files.
Are screenshots uploaded to your servers?
No. All image loading and rendering runs locally in your browser.
Which image formats are supported?
PNG, JPG, JPEG, WebP, GIF, BMP, and TIFF are supported. Convert HEIC first.
Can I use clay mockup exports commercially?
Yes, for your own app marketing or client work, provided you have rights to the underlying UI assets.
Does it support transparent PNG exports?
Yes. Set Export background to Transparent to download a PNG with an alpha channel for layering on gradients, photos, or slide decks.