Design Atlas
한국어
▭ Landing page patterns

Product screenshot frame

프로덕트 스크린샷 프레임

A browser or device chrome that frames a product screenshot to give it real-world context.

Also known as: Browser mockupDevice frameChrome frame
···
html
<div class="frame">
  <div class="chrome"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span><span class="url">app.example.com/dashboard</span></div>
  <div class="screen" id="screen">
    <div class="side"><i></i><i></i><i></i><i></i></div>
    <div class="main">
      <div class="row"><b class="card"></b><b class="card"></b><b class="card"></b></div>
      <div class="chart"><span></span><span></span><span></span><span></span><span></span></div>
    </div>
  </div>
</div>
css
.frame{width:min(92%,760px);height:min(88%,300px);border-radius:12px;overflow:hidden;background:var(--surface);
  border:1px solid var(--line);box-shadow:0 16px 40px rgba(0,0,0,.14);display:flex;flex-direction:column;
  animation:float 5s ease-in-out infinite}
.chrome{display:flex;align-items:center;gap:6px;padding:clamp(5px,1.3vmin,9px) clamp(8px,2vmin,12px);
  border-bottom:1px solid var(--line)}
.dot{width:clamp(5px,1.1vmin,8px);height:clamp(5px,1.1vmin,8px);border-radius:50%}
.dot.r{background:#f25c5c}.dot.y{background:#f2b45c}.dot.g{background:#5cc26e}
.url{margin-left:clamp(6px,1.6vmin,12px);font-size:clamp(6.5px,1.2vmin,9px);color:var(--muted);
  background:var(--bg);border-radius:4px;padding:.2em .8em}
.screen{flex:1;display:flex;background:var(--bg)}
.side{width:18%;display:flex;flex-direction:column;gap:12%;padding:8%;border-right:1px solid var(--line)}
.side i{display:block;height:9%;border-radius:3px;background:var(--line)}
.side i:first-child{background:var(--accent)}
.main{flex:1;display:flex;flex-direction:column;gap:8%;padding:6%}
.row{display:flex;gap:6%;height:34%}
.card{flex:1;border-radius:8px;background:var(--surface);border:1px solid var(--line)}
.chart{flex:1;display:flex;align-items:flex-end;gap:6%;padding:4% 2%}
.chart span{flex:1;border-radius:3px 3px 0 0;background:var(--accent-3)}
.chart span:nth-child(1){height:40%}.chart span:nth-child(2){height:70%}.chart span:nth-child(3){height:55%}
.chart span:nth-child(4){height:85%}.chart span:nth-child(5){height:60%}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-2%)}}

A raw UI screenshot pasted onto a page lacks context — what kind of screen is this? Wrapping it in a browser chrome (traffic-light buttons, address bar) or a device frame (notch, home indicator) instantly signals "this is a real website/app" and reads as more finished than the same image without one.

The frame doesn't need a real screenshot inside — a drawn mini-UI (cards, a chart, a list) works too, and is easier to keep up to date while the actual product is still changing fast. The same framed visual gets reused across the hero, next to feature descriptions, and as a social-share image.

Overdone frame decoration — heavy shadows, reflections, a 3D tilt — can upstage the UI it's meant to showcase. A fake address bar can use a plausible-looking string to add realism, but should never use a real third party's actual domain.

When to use

Use for screen-based products (web or app) where you want to show "this is what it actually looks like." For screenless products (an API, infrastructure), a diagram fits better.