📸 How to put your own image on any mockup

Every mockup in this lab accepts your own photo or screenshot. You have two simple ways to do it — use whichever one you find easier:

Method 1 — <img> inside the screen

<div class="screen">
  <img class="screen-img"
       src="my-photo.jpg"
       alt="app screenshot"/>
</div>

Method 2 — background-image in CSS

.screen {
  background:
    url('my-photo.jpg') center/cover;
}

The class .screen-img is already defined — it fills the screen with object-fit: cover, so any image will crop to fit without stretching. Replace my-photo.jpg with the path to a file in your folder, or a full URL.

01 — Single Device

Phone — Modern

An iPhone-style frame with a dynamic island, rounded bezel, and a colorful gradient app UI on the screen. Perfect for mobile-first product hero sections.

aspect-ratio + border-radius + ::before island PHONE

9:41100%

Hello,
Good morning.

Your schedule is clear today. Time to build something beautiful.

Start creating

<!-- OPTION A: Styled app UI (gradient + fake content) -->
<div class="phone-modern">
  <div class="power-btn"></div>
  <div class="screen">
    <div class="island"></div>
    <div class="status-bar"><span>9:41</span><span>100%</span></div>
    <div class="app-title">Hello,<br/>Good morning.</div>
    <div class="app-body">
      <p>Your schedule is clear today.</p>
      <div class="cta">Start creating</div>
    </div>
    <div class="screen-gloss"></div>
  </div>
</div>

<!-- OPTION B: Drop in your own photo or screenshot -->
<div class="phone-modern">
  <div class="power-btn"></div>
  <div class="screen">
    <div class="island"></div>
    <!-- YOUR IMAGE: replace src with your file path -->
    <img class="screen-img" src="your-screenshot.jpg" alt="app"/>
    <div class="screen-gloss"></div>
  </div>
</div>

.phone-modern {
  width: 240px;
  aspect-ratio: 9 / 19.5;      /* modern phone shape */
  background: linear-gradient(135deg,#1a1a22,#0a0a10);  /* metallic bezel */
  border-radius: 36px;
  padding: 10px;               /* gap between bezel and screen */
  box-shadow:
    0 0 0 2px #2a2a32,         /* outer frame ring */
    0 40px 80px -20px rgba(0,0,0,.75),
    0 8px 24px -6px rgba(0,0,0,.4),
    inset 0 0 2px rgba(255,255,255,.12);
  position: relative;
}
/* Volume buttons on the left edge */
.phone-modern::before {
  content: ''; position: absolute;
  left: -2px; top: 90px;
  width: 3px; height: 30px;
  background: linear-gradient(90deg,#0a0a10,#2a2a32);
  border-radius: 2px 0 0 2px;
}
.phone-modern::after {
  content: ''; position: absolute;
  left: -2px; top: 130px;
  width: 3px; height: 50px;
  background: linear-gradient(90deg,#0a0a10,#2a2a32);
  border-radius: 2px 0 0 2px;
}
/* Power button on the right edge */
.phone-modern .power-btn {
  position: absolute;
  right: -2px; top: 110px;
  width: 3px; height: 60px;
  background: linear-gradient(270deg,#0a0a10,#2a2a32);
  border-radius: 0 2px 2px 0;
}
.phone-modern .screen {
  width: 100%; height: 100%;
  border-radius: 28px;
  background: linear-gradient(135deg,#0ea5e9,#a855f7,#ec4899);
  overflow: hidden;
  position: relative;
  color: #fff;
}
/* Dynamic island — floating pill at top */
.phone-modern .island {
  position: absolute;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  width: 86px; height: 24px;
  background: #000;
  border-radius: 999px;
  z-index: 2;
}
/* For images: fill the screen, crop to fit */
.screen-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Subtle glass reflection — drops on top of any screen */
.screen-gloss {
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(
    110deg,
    rgba(255,255,255,.14) 0%,
    rgba(255,255,255,0)   35%,
    rgba(255,255,255,0)   70%,
    rgba(255,255,255,.06) 100%);
  border-radius: inherit;
}

02 — Single Device

Laptop — MacBook

A MacBook-inspired laptop frame — screen plus a thin base that reads as a hinge and keyboard tray. The screen holds a web app dashboard with a mini bar chart.

aspect-ratio 16:10 + layered divs for base LAPTOP

<div class="laptop">
  <div class="screen-frame">
    <div class="screen">
      <!-- YOUR IMAGE: replace src with your own screenshot -->
      <img class="screen-img"
           src="your-screenshot.jpg"
           alt="dashboard"/>
      <div class="screen-gloss"></div>
    </div>
  </div>
  <div class="base"></div>
</div>

<!-- You can also skip the image and build real HTML -->
<!-- inside .screen (headings, charts, etc). -->

.laptop { width: 480px; position: relative; }

.laptop .screen-frame {
  background: #1a1a22;
  border: 2px solid #2a2a32;
  border-radius: 14px 14px 2px 2px;  /* square bottom */
  padding: 14px 14px 18px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.7);
}
.laptop .screen {
  aspect-ratio: 16 / 10;             /* laptop screen ratio */
  border-radius: 4px;
  background: linear-gradient(135deg,#1e293b,#0f172a);
  overflow: hidden;
  position: relative;
  padding: 22px;
  color: #fff;
}
/* Laptop base — flat trapezoid */
.laptop .base {
  height: 12px;
  background: linear-gradient(180deg,#2a2a32,#16161c);
  border-radius: 0 0 14px 14px;
  margin: 0 -12px;   /* wider than the screen */
  position: relative;
}
.laptop .base::before {               /* center notch */
  content: ''; position: absolute;
  top: 0; left: 50%;
  width: 80px; height: 5px;
  background: #0a0a12;
  border-radius: 0 0 10px 10px;
  transform: translateX(-50%);
}

03 — Single Device

Tablet — iPad

A 3:4 tablet frame with a thin uniform bezel and a tiny camera dot on the top edge. Perfect for showcasing a reading app, magazine, or photo-forward UI.

aspect-ratio 3:4 + uniform padding bezel TABLET

Chapter Three

Notes from a
quiet morning

The light moved across the wall slowly, as it always does this time of year — measured, almost reverent. A cup of coffee grew cold on the desk.

<div class="tablet">
  <div class="screen">
    <div class="eyebrow">Chapter Three</div>
    <h3>Notes from a<br/>quiet morning</h3>
    <p>The light moved across the wall slowly...</p>
    <div class="grid">
      <div></div><div></div>
      <div></div><div></div>
    </div>
  </div>
</div>

.tablet {
  width: 340px;
  aspect-ratio: 3 / 4;     /* tablet portrait ratio */
  background: #121218;     /* bezel */
  border-radius: 24px;
  padding: 12px;           /* uniform bezel gap */
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 30px 60px -15px rgba(0,0,0,.6);
  position: relative;
}
/* Tiny camera dot on top edge */
.tablet::before {
  content: ''; position: absolute;
  top: 6px; left: 50%;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #333;
  transform: translateX(-50%);
}
.tablet .screen {
  width: 100%; height: 100%;
  border-radius: 14px;
  background: linear-gradient(160deg,#fdf6ee,#f5ebe0);
  overflow: hidden;
  padding: 22px;
  color: #2a2018;
}

04 — Single Device

Browser Window

A macOS-style browser chrome with traffic-light dots and a URL bar. Useful for showing marketing websites, landing pages, or web app screenshots.

flex title bar + colored ::before dots BROWSER

your-brand.com

your-brand.com / features

Build beautifully.

A tiny window into a fictional product landing page — cards, gradients, and plenty of empty space.

portfolio

mysite.com

<div class="browser">
  <div class="titlebar">
    <div class="dot red"></div>
    <div class="dot yellow"></div>
    <div class="dot green"></div>
    <div class="urlbar">your-brand.com / features</div>
  </div>
  <div class="content">
    <h1>Build beautifully.</h1>
    <p>Short intro line...</p>
    <div class="cards"><div></div><div></div><div></div></div>
  </div>
</div>

.browser {
  width: 560px;
  background: #161620;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.6);
  border: 1px solid rgba(255,255,255,.06);
}
.browser .titlebar {
  background: #1f1f2a;
  padding: 12px 16px;
  display: flex; align-items: center; gap: 8px;
}
/* Three colored dots like macOS */
.browser .dot { width: 12px; height: 12px; border-radius: 50%; }
.browser .dot.red    { background: #ff5f57; }
.browser .dot.yellow { background: #febc2e; }
.browser .dot.green  { background: #28c840; }

.browser .urlbar {
  flex: 1; margin-left: 14px;
  background: #0f0f17;
  border-radius: 6px;
  padding: 5px 12px;
  font-family: monospace;
  font-size: 10px;
  color: rgba(255,255,255,.4);
}
.browser .urlbar::before {
  content: '\01F512\00A0';   /* padlock icon */
}

05 — Scene

Multi-Device Combo

A laptop with a phone overlapping it in the lower right — the classic "responsive across devices" shot. Uses position:absolute to float the phone over the laptop.

position:absolute + z-index overlap COMBO

<div class="combo">
  <div class="combo-laptop">
    <div class="screen-frame">
      <div class="screen">Your App</div>
    </div>
    <div class="base"></div>
  </div>
  <div class="combo-phone">
    <div class="screen">mobile</div>
  </div>
</div>

.combo {
  position: relative;     /* anchor for absolute phone */
  display: flex;
  align-items: flex-end;
  padding-right: 60px;    /* room for the phone overlap */
}
.combo .combo-laptop { width: 440px; position: relative; }

/* Phone floats over the lower-right corner of the laptop */
.combo .combo-phone {
  width: 130px;
  aspect-ratio: 9 / 19.5;
  background: #111;
  border-radius: 22px;
  padding: 6px;
  position: absolute;
  right: 0;
  bottom: -20px;          /* pokes below laptop for depth */
  z-index: 2;             /* sits on top */
  box-shadow:
    0 25px 50px -12px rgba(0,0,0,.7),
    0 0 0 1px rgba(255,255,255,.08);
}
.combo .combo-phone .screen {
  width: 100%; height: 100%;
  border-radius: 16px;
  background: linear-gradient(160deg,#ec4899,#8b5cf6);
}

06 — Scene

Tilted Phone Trio

Three phones arranged with 3D perspective — outer phones tilt inward, center phone sits forward and raised. Great for showcasing three screens or features at once.

perspective + rotateY + translateY 3D

<div class="trio">
  <div class="t-phone left">
    <div class="screen">Feature one</div>
  </div>
  <div class="t-phone center">
    <div class="screen">Main feature</div>
  </div>
  <div class="t-phone right">
    <div class="screen">Feature three</div>
  </div>
</div>

/* Parent creates a 3D rendering context */
.trio {
  perspective: 1400px;     /* depth of field */
  display: flex;
  align-items: center;
  justify-content: center;
}

.trio .t-phone {
  width: 180px;
  aspect-ratio: 9 / 19.5;
  background: #111;
  border-radius: 28px;
  padding: 8px;
  box-shadow:
    0 35px 60px -20px rgba(0,0,0,.7),
    0 0 0 1px rgba(255,255,255,.08);
  transition: transform .4s ease;
}

/* Left phone — tilted toward the center */
.trio .t-phone.left {
  transform:
    rotateY(22deg)          /* angle in */
    rotateX(4deg)
    translateX(30px)
    scale(.9);
}
/* Center phone — front-facing, slightly raised */
.trio .t-phone.center {
  transform: translateY(-12px) scale(1.05);
  z-index: 2;               /* sits above siblings */
}
/* Right phone — mirrored of left */
.trio .t-phone.right {
  transform:
    rotateY(-22deg)
    rotateX(4deg)
    translateX(-30px)
    scale(.9);
}