Skip to content

Screenshot Aspect Framer

Add device frame around any screenshot

Updated

What is the Screenshot Aspect Framer?

Turn any flat screenshot into a professional device mockup in seconds. The Screenshot Aspect Framer adds realistic frames around your images for iPhone, iPad, MacBook, Android, and browser windows, plus perfect aspect ratios for social, App Store, and marketing.

Built for founders, designers, developers, and marketers who need App Store screenshots, Product Hunt launches, Twitter posts, and portfolio covers without Figma or Photoshop.

What you can create

  • Phone mockups: iPhone 15 Pro with Dynamic Island, iPhone 14 notch, Pixel 8 hole-punch
  • Tablet & Laptop: iPad Pro 12.9", MacBook Pro 16" and MacBook Air with accurate bezels and base
  • Browser frames: Safari and Chrome with editable URL pill, traffic lights, and top bar
  • Aspect-only mode: No device at all, just clean padding, rounded corners, and exact ratios like 1:1, 16:9, 9:16, 4:5

Why it's different

  • 100% client-side - images never leave your browser, no upload, no watermark
  • True canvas rendering - retina-sharp export up to 4x, not a CSS screenshot
  • Designer controls - frame color, corner boost, padding, scale, shadow depth, grain, gradient presets, mesh backgrounds
  • Perfect fit - cover, contain, fill, center + zoom and offset X/Y to reposition any screenshot
  • Export freedom - PNG with transparency, JPEG, and WEBP with quality control, plus one-click copy to clipboard

Whether you need a titanium iPhone mockup for your app, a MacBook frame for your SaaS landing page, or a browser mockup for your blog, this tool gives you studio-quality results instantly - free, offline-capable, and without an account.

How it works

This tool renders everything on a high-resolution HTML Canvas in your browser. No server, no API, no watermarks.

1. Add your screenshot

Drop a PNG, JPG, or WEBP, click Browse, or just paste with Cmd+V / Ctrl+V. The tool reads image dimensions instantly and creates a local preview. Max 25MB, handled entirely client-side.

2. Choose a device frame

Select from 10 accurate frames. Each frame is drawn procedurally with correct bezel ratio, outer radius, and inner screen radius:

  • Phones: bezel and island/notch/hole-punch drawn on top
  • Laptops: screen + bottom deck with speaker notch
  • Browsers: top bar with window controls and editable URL
  • Minimal / None: for clean aspect framing

Pick a frame color from titanium, silver, space gray, or use a custom hex color.

3. Set background and aspect

  • Background: Transparent (with checker preview), Solid color, Gradient with angle control, or Mesh with soft blobs
  • Aspect: Auto to hug the device, or lock to 1:1, 4:3, 16:9, 16:10, 9:16, 4:5, 21:9, or Custom W:H
  • Adjust Padding to control breathing room and Scale to fit the device inside the canvas

4. Fine-tune the screenshot

Use Fit Mode:

  • Cover: fills and crops (best for App Store)
  • Contain: shows full screenshot with letterboxing
  • Fill / Center: stretch or pixel-perfect center Then use Zoom and Offset X/Y sliders to reposition. Reset anytime.

Add Shadow from none to extra deep, toggle notch/island, grain texture, and corner boost for extra roundness.

5. Export retina-ready

Choose 1x to 4x resolution, format PNG (keeps transparency), JPEG (smaller file) or WEBP (modern), set quality and filename. The tool calculates final export dimensions (e.g., 2400x2400 @2x) and renders an offscreen canvas at full resolution before downloading or copying to clipboard.

All calculations for layout, aspect parsing, and object-fit are pure functions, so results are pixel-perfect and reproducible.

Examples

iPhone 15 Pro App Store Screenshot

Wrap a portrait app screenshot in iPhone 15 Pro titanium frame with aurora gradient for App Store preview

1179x2556 PNG app UI, iPhone 15 Pro, gradient background, padding 64, shadow large, export 2x PNG
 
2400x2400 framed mockup with dynamic island, device shadow and clean background ready for App Store

Safari Browser Mockup for Landing Page

Turn a desktop screenshot into a realistic Safari window with URL bar and window controls

1920x1080 landing page screenshot, Safari frame, solid light background, aspect 16:9, fit cover
 
3840x2160 browser mockup with traffic lights, centered URL pill yourdomain.com and soft shadow

No Frame Aspect Only for Instagram

Crop any screenshot to a perfect square with rounded corners without a device frame

Tall mobile screenshot, No Frame mode, aspect 1:1, corner radius 24, contain fit, transparent background
 
1080x1080 square image with rounded corners and transparent background ready for Instagram carousel

Frequently asked questions

What is a screenshot aspect framer?

A screenshot aspect framer wraps your raw screenshot in a realistic device frame and forces it into a specific aspect ratio. Instead of posting a flat rectangle, you get a polished iPhone, iPad, MacBook, or browser mockup with background, shadow, and padding - ready for App Store, Product Hunt, social media, or your website.

Which devices and frames are supported?

10 frames are built-in: iPhone 15 Pro (Dynamic Island), iPhone 14 (notch), Pixel 8 (hole-punch), iPad Pro 12.9", MacBook Pro 16" and MacBook Air (with base and deck detail), Safari and Chrome browser windows with editable URL and traffic lights, Minimal Frame, and No Frame for aspect-only cropping. All are drawn with vector precision, not static images.

Can I export with a transparent background?

Yes. Choose Background > Transparent. The preview shows a checkerboard, but the export is truly transparent when you download as PNG or WEBP. If you export as JPEG, the tool automatically fills white because JPEG does not support transparency.

What export formats and resolutions do you support?

You can export at 1x, 2x, 3x, or 4x. Format options are PNG for highest quality and transparency, JPEG for smaller files with adjustable quality 60-100%, and WEBP for modern web. The tool shows live canvas size and final export size, e.g., Canvas 1200x675 becomes 2400x1350 at 2x.

Is my screenshot uploaded to a server? Is it safe?

No. Everything runs 100% client-side in your browser using Canvas API. Your image is loaded via a local Object URL and never uploaded, stored, or sent anywhere. It works offline after page load, has no watermark, and requires no account.

How do I get a perfect 1:1 or 9:16 post for Instagram?

Set Aspect to 1:1 Square or 9:16 Portrait, choose No Frame or Minimal Frame, adjust Padding and Corner Boost, and set Fit to Contain if you want to show the whole screenshot. Export at 2x or 3x to get 2160x2160 or 1080x1920 - perfect for Instagram feed, stories, and reels covers.

Can I customize the browser URL and window controls?

Yes. When you select Safari or Chrome frame, you can edit the URL text, toggle window controls (red/yellow/green dots), change frame color to match light or dark UI, and control top bar height via the device preset. The URL pill truncates automatically and uses a monospaced font for realism.

Why does my screenshot look cropped or stretched?

You are likely on Fit Mode Cover, which fills the screen and crops edges. Switch to Contain to show the full image, or use Zoom and Offset X/Y to reposition. Use Fill only if you want to stretch. Click Reset Position to return to center at 1x zoom.

Related tools

More utilities you might find handy.

Image

Avatar Generator - Placeholder & Initials Avatar Maker

Generate beautiful placeholder avatars with initials, gradients, pixel, identicon and geometric styles in seconds
Image

Color Picker From Image

Extract HEX, RGB, and HSL color codes from any image with pixel-perfect precision.
Image

EXIF Viewer Online

View EXIF data from any photo instantly in your browser — see camera model, shutter speed, aperture, ISO, GPS location, and date taken. 100% private, no upload.