Clay mockups: minimal device frames in any color

Updated October 30, 2026

A clay mockup puts your screenshot in a soft, matte device shape of a single color. It has no camera, glass reflections or metal edges. It reads as "a phone" or "a tablet" without being a specific model. Clay frames keep attention on your app, and you can match the frame to your brand color.

What makes a mockup "clay"

The name comes from clay renders in 3D modeling: an object shown in one plain, matte material, so you see its shape without its surface detail. A clay device mockup works the same way.

One color, matte. The whole frame is a single color, with soft shading from the light, and no shine or reflections.
Simplified shape. It has the proportions of a phone or tablet: rounded corners, a body slightly larger than the screen, a little depth. Small details like camera cutouts are left out.
Not tied to a model. It doesn't claim to be a particular iPhone or iPad, so nobody reads it as last year's device.

When a clay frame works better than a realistic one

You want it to match your brand

Real devices come in a few fixed finishes. A clay frame can be any color, so it can be your brand color, a shade of your app's accent, or a neutral that disappears into the background. For a set of App Store screenshots or a series of social posts, one clay color across every image makes the set look designed rather than assembled.

Minimal posts and slides

On a social feed, a detailed phone with reflections and visible buttons competes with your interface. A matte frame in a soft color is quieter, so your screen is what people look at. The same goes for slides and documentation, where the device is only there to say "this is on a phone".

It won't look dated

Realistic frames date. A screenshot in last year's model can make your app look older than it is, and you'll want to redo your images when new phones come out. A clay phone doesn't belong to any year, so images you make now still look right next year.

It works for any screen size

Sometimes your screenshot doesn't match a current device: a simulator capture, an older device, or a phone that hasn't been announced. A realistic frame would either be the wrong model or not exist yet. A clay frame takes its shape from the screenshot, so it fits whatever you have without suggesting any particular hardware.

When to use a realistic frame

Clay isn't always the right choice. If your app depends on a particular device, such as a feature for the newest iPhone or an iPad-only layout, a realistic frame shows that at a glance. Product announcements and press images often look better with real hardware, too. Many people use both: realistic frames for launch images, and clay for everyday posts.

How to pick a clay color

Start from the background. The frame and the background are the two big areas of color. Pick the background first, then a frame color a step lighter or darker in the same family. Pale gray on white, deep blue on navy and peach on cream all work.
Keep the screen the brightest thing. If your app has a light interface, a slightly darker frame makes the screen stand out. For a dark interface, a lighter frame does the same.
Use your brand color carefully. A full-strength brand color on the frame can overpower the screen. A softened version, with more white or more gray, usually looks better and still reads as yours.
Stay consistent. Use one frame color across a set of images. Vary the background or the layout instead.
Check contrast. On a frame that's very close to the background color, the device can disappear. A soft shadow helps separate them.

How to make clay mockups in FeatureFrame

FeatureFrame has two clay devices: Clay Phone, shaped like a modern iPhone, and Clay Tablet, shaped like an iPad mini. Neither has a Dynamic Island or camera drawn in. Each takes its shape from your screenshot, so it fits any screen size.

Add your screenshot. Drag it into the window or paste it. Phone-shaped screenshots go on Clay Phone, and tablet-shaped ones on Clay Tablet.
Choose Clay in the Device menu if the screenshot is on a real device frame.
Pick a color. There are 14 presets: White, Black, Cloud, Stone, Sand, Terracotta, Graphite, Blush, Peach, Butter, Mint, Sky, Lavender and Sage. To use any other color, such as your brand's, enter its hex value or use the color picker.
Tilt it. Clay frames are 3D like the real devices, so the angle presets and tilt controls work the same. A slight tilt shows the soft shading along the edge.
Set the scene. Choose a background (solid, gradient, a macOS wallpaper or your own image), a shadow, and a canvas size. Add a second or third screenshot for a layout.
Copy or export. Copy the image to paste it into a post, drag it out, or export PNG or JPEG.

Clay Phone and Clay Tablet in White and Black are free. The other colors, custom colors, the real device frames, PNG export and your own watermark come with FeatureFrame Pro, for $19.99 once or $9.99 a year.

A simple recipe to start with

For a clean set of App Store screenshots or a social post:

Use the Cloud or Sky frame on a very light background in the same family.
Add a slight tilt and a soft shadow.
Keep the same color and angle on every image in the set.
Use a 4:5 canvas for feeds, or 16:9 for a launch page or slide.

If you're making App Store screenshots, check the sizes Apple asks for in our App Store screenshot size guide.