iPhone 18 Pro Mockup Generator

Drop in a screenshot and download it inside the iPhone 18 Pro frame as a PNG. The screen is 402 × 874 CSS px with a Dynamic Island, and the frame comes in Black, Silver, Glacier and Burgundy. Your screenshot stays in your browser.

1332 × 2748
Screenshot
Orientation
You can use the mockup in commercial work without crediting Hoverify. License terms

iPhone 18 Pro screen size and viewport

Same 402 by 874 viewport as the 17 Pro and the base 17. The Dynamic Island is smaller than the 17 Pro's, which is the only visible difference in the frame.

The Dynamic Island is drawn into the bezel art, and the extension keeps its own drawn cutout hidden when the frame is on. The viewport below is what Hoverify's responsive viewer renders the page at for this device, in CSS pixels. The frame image is that viewport plus the bezel, at 3 pixels per CSS pixel. Rows marked "in the frame image" are in those pixels, so they drop straight into Figma or Photoshop at the frame's full size.

Viewport (CSS px)
402 × 874
Device pixel ratio
3
Physical pixels at that ratio
1206 × 2622
Operating system
iOS
Screen cutout
Dynamic Island
Status bar height
62 CSS px
Navigation
Gesture bar
Screen corner radius
186 px in the frame image (62 CSS px)
Frame image
1332 × 2748 px at 3× (444 × 916 CSS px)
Screen opening offset
63 px from the left, 63 px from the top in the frame image (21 and 21 CSS px)
Finishes
Black, Silver, Glacier, Burgundy

iPhone 18 Pro frame PNG and WebP download

The bare bezel with a transparent screen opening, one file per finish. The WebP is the file the Hoverify extension ships. The PNG is decoded from it in your browser when you click, and the pixels are identical. You can use both in personal and commercial work under the device frames license, and credit is optional.

iPhone 18 Pro1332 × 2748 px per file
iPhone 18 Pro frame in Black
Black
iPhone 18 Pro frame in Silver
Silver
iPhone 18 Pro frame in Glacier
Glacier
iPhone 18 Pro frame in Burgundy
Burgundy

Frequently Asked Questions

Have a question we haven't answered? Get in touch.

For web developers and designers

Test your live site on every device at once

The responsive viewer in Hoverify loads your page inside this frame at 402 × 874, with Safari's bars drawn around it, next to every other device you have added. Scroll one and they all scroll. Capture a framed screenshot from the device header when it looks right.

  • 3 browsers per license
  • 14-day refund
  • No auto-renewal