modern-devices.css

Pure CSS Apple device mockups for showcasing your app screenshots.
iPhone 17/16/15, MacBook Pro/Air, iMac 24" — all official colors, zero dependencies.

Live Demo →

Why

Most device mockup libraries use heavy images or SVG. This one is pure CSS — no images, no SVG, no JS, no dependencies. Just drop in a <link> and wrap your screenshot.

Features

• Pure CSS — no images, no SVG, no JavaScript
• 25+ devices — iPhone 17/16/15 series, MacBook Pro/Air, iMac 24"
• All official colors — every color variant Apple ships
• Pixel-accurate details — Dynamic Island with camera, antenna bands, side buttons, camera control, notch, home button
• Lightweight — < 15 KB
• Click-to-zoom — interactive demo with lightbox preview

Supported Devices

Device	Colors	Key Details
iPhone 17 Pro / Pro Max	Natural, Black, White, Desert Titanium	Dynamic Island, Action Button, Camera Control
iPhone 17	Black, Green, Blue, Pink, White	Dynamic Island, Action Button, Camera Control
iPhone 16 Pro / Pro Max	Natural, Black, White, Desert Titanium	Dynamic Island, Action Button, Camera Control, Antenna Bands
iPhone 16 / Plus	Black, White, Ultramarine, Teal, Pink	Dynamic Island, Action Button, Camera Control
iPhone 15 Pro / Pro Max	Natural, Black, White, Blue Titanium	Dynamic Island, Action Button
iPhone 15 / Plus	Black, Blue, Green, Yellow, Pink	Dynamic Island, Mute Switch
iPhone SE	Starlight, Midnight, Red	Home Button, Touch ID
MacBook Pro 16" / 14"	Space Black, Silver	Notch, Keyboard Base
MacBook Air 15" / 13"	Silver, Midnight, Starlight, Space Gray	Notch, Keyboard Base
iMac 24"	Silver, Blue, Green, Pink, Orange, Purple	Stand, Chin

Quick Start

CDN

<link rel="stylesheet" href="https://unpkg.com/modern-devices.css/devices.css">

npm

npm install modern-devices.css

@import 'modern-devices.css/devices.css';

Usage

iPhone 17 Pro

<div class="md-device iphone-17-pro">
  <div class="island"></div>
  <div class="screen">
    <img src="your-screenshot.png" alt="App screenshot" />
  </div>
  <div class="power"></div>
  <div class="action"></div>
  <div class="camera-ctrl"></div>
  <div class="vol-up"></div>
  <div class="vol-down"></div>
  <div class="antenna-top-left"></div>
  <div class="antenna-top-right"></div>
  <div class="antenna-bottom-left"></div>
  <div class="antenna-bottom-right"></div>
  <div class="home-indicator"></div>
</div>

Color variants:

<div class="md-device iphone-17-pro">...</div>           <!-- Natural Titanium -->
<div class="md-device iphone-17-pro black">...</div>     <!-- Black Titanium -->
<div class="md-device iphone-17-pro white">...</div>     <!-- White Titanium -->
<div class="md-device iphone-17-pro desert">...</div>    <!-- Desert Titanium -->

MacBook Pro

<div class="md-device macbook-pro-16">
  <div class="lid">
    <div class="notch"></div>
    <div class="screen">
      <img src="your-screenshot.png" alt="App screenshot" />
    </div>
  </div>
  <div class="base"></div>
</div>

iMac 24"

<div class="md-device imac-24">
  <div class="display">
    <div class="camera"></div>
    <div class="screen">
      <img src="your-screenshot.png" alt="App screenshot" />
    </div>
  </div>
  <div class="chin"></div>
  <div class="stand-arm"></div>
  <div class="stand-base"></div>
</div>

All Device Classes

Class	CSS Size	Real Screen
.iphone-17-pro	260 × 530	6.3" · 2622 × 1206
.iphone-17-pro-max	286 × 582	6.9" · 2868 × 1320
.iphone-17	248 × 508	6.1" · 2556 × 1179
.iphone-16-pro	260 × 530	6.3" · 2622 × 1206
.iphone-16-pro-max	286 × 582	6.9" · 2868 × 1320
.iphone-16	252 × 514	6.1" · 2556 × 1179
.iphone-16-plus	276 × 562	6.7" · 2796 × 1290
.iphone-15-pro	258 × 526	6.1" · 2556 × 1179
.iphone-15-pro-max	284 × 578	6.7" · 2796 × 1290
.iphone-15	250 × 510	6.1" · 2556 × 1179
.iphone-15-plus	274 × 558	6.7" · 2796 × 1290
.iphone-se	230 × 460	4.7" · 1334 × 750
.macbook-pro-16	640 × 434	16.2" · 3456 × 2234
.macbook-pro-14	560 × 384	14.2" · 3024 × 1964
.macbook-air-15	600 × 404	15.3" · 2880 × 1864
.macbook-air-13	520 × 352	13.6" · 2560 × 1664
.imac-24	540 × 462	23.5" · 4480 × 2520

Color Classes

Class	Available on
(default)	Natural Titanium / Black / Silver
.black	iPhone 17/16/15 Pro
.white	iPhone 17/16/15 Pro, iPhone 16/17
.desert	iPhone 17/16 Pro
.blue	iPhone 15 Pro, iPhone 17/15, iMac
.ultramarine	iPhone 16
.teal	iPhone 16
.pink	iPhone 17/16/15, iMac
.green	iPhone 17/15, iMac
.yellow	iPhone 15
.midnight	iPhone SE, MacBook Air
.starlight	MacBook Air
.space-gray	MacBook Air
.red	iPhone SE
.silver	MacBook Pro
.orange	iMac
.purple	iMac

Screenshot Tips

For best results, match the native screen resolution:

Device	Resolution
iPhone 17 Pro	1206 × 2622
iPhone 17 Pro Max	1320 × 2868
iPhone 17	1179 × 2556
iPhone 16 Pro	1206 × 2622
iPhone SE	750 × 1334
MacBook Pro 16"	3456 × 2234
iMac 24"	4480 × 2520

License

MIT © Zeno Team

---

_{Open-sourced by Zeno Team · See it in action with Zeno AI — AI-powered content growth}