Design Atlas
한국어
◧ Film & photo

Shallow depth of field

얕은 심도

Opening the aperture wider (a smaller f-number) blurs everything outside the focal plane faster — the subject stays sharp while the background melts away.

Also known as: 아웃포커싱Out-of-focus backgroundf-stopAperture blur
···
html
<div class="stage">
  <div class="bg">
    <i class="dot d1"></i><i class="dot d2"></i><i class="dot d3"></i><i class="dot d4"></i><i class="dot d5"></i>
  </div>
  <div class="subject"></div>
  <div class="fg"></div>
  <div class="hud">
    <svg viewBox="0 0 60 60" width="30" height="30">
      <circle cx="30" cy="30" r="26" fill="none" stroke="rgba(255,255,255,.5)" stroke-width="2"/>
      <g id="hex"><polygon points="30,8 48,19 48,41 30,52 12,41 12,19" fill="#0a0a0a"/></g>
    </svg>
    <span class="fstop" id="fstop">f/1.4</span>
  </div>
</div>
css
.stage{position:absolute;inset:0;background:linear-gradient(180deg,#8fc7e8,#dff0e0 70%)}
.bg{position:absolute;inset:0;transition:filter 1.1s ease}
.bg .dot{position:absolute;border-radius:50%}
.d1{width:15%;aspect-ratio:1;left:8%;top:18%;background:radial-gradient(circle at 35% 35%,#fff6c8,#ffd23f 70%)}
.d2{width:9%;aspect-ratio:1;left:24%;top:44%;background:radial-gradient(circle at 35% 35%,#ffffff,#a9d6ff 70%)}
.d3{width:20%;aspect-ratio:1;left:66%;top:12%;background:radial-gradient(circle at 35% 35%,#ffe6c8,#ff9a5b 70%)}
.d4{width:11%;aspect-ratio:1;left:80%;top:46%;background:radial-gradient(circle at 35% 35%,#ffffff,#8fe0c8 70%)}
.d5{width:60%;height:22%;left:0;bottom:0;background:linear-gradient(180deg,#79b06a,#4f8a49)}
.subject{position:absolute;left:38%;top:30%;width:26%;height:46%;border-radius:46% 46% 40% 40%/50% 50% 38% 38%;
  background:linear-gradient(160deg,#3a3f55,#20232f);box-shadow:0 10px 16px rgba(0,0,0,.25)}
.fg{position:absolute;left:-6%;bottom:-8%;width:46%;height:34%;border-radius:50% 40% 60% 30%;
  background:#2e5c34;opacity:.85;transition:filter 1.1s ease}
.hud{position:absolute;right:5%;top:5%;display:flex;flex-direction:column;align-items:center;gap:2px}
#hex{transition:transform 1.1s ease;transform-origin:30px 30px}
.fstop{font:700 11px ui-monospace,monospace;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
js
const stops=[1.4,2.8,5.6,11,16];
const bg=document.querySelector('.bg');
const fg=document.querySelector('.fg');
const hex=document.getElementById('hex');
const label=document.getElementById('fstop');
let i=0;
function step(){
  const f=stops[i];
  const openness=1-(Math.log(f/1.4)/Math.log(16/1.4))*0.78;
  hex.style.transform='scale('+openness.toFixed(2)+')';
  const blurAmt=openness*9;
  bg.style.filter='blur('+blurAmt.toFixed(1)+'px)';
  fg.style.filter='blur('+(blurAmt*0.8).toFixed(1)+'px)';
  label.textContent='f/'+f;
  i=(i+1)%stops.length;
}
step();
setInterval(step,1500);

Depth of field is the range in front of and behind the focus point that still reads as sharp. Open the aperture wider — a smaller f-number like f/1.4 — and that range narrows, so foreground and background blur fast; stop it down to a bigger f-number like f/16 and a much wider range stays crisp.

The hexagon icon in the demo mimics the aperture blades opening and closing — the wider it opens, the smaller the f-number and the stronger the background blur. On the web you don't need real lens optics: filter: blur() on separate background and foreground layers gets you most of the same impression.

At the same focal length, a bigger sensor (or film) and a closer subject both shrink depth of field further. That's why phone "portrait mode" fakes it in software — the optics alone can't get shallow enough, so the background gets blurred artificially after the fact.

When to use

Use it to clear a busy background behind a product or portrait — or fake the same emphasis in a UI card by blurring everything except the one element you want noticed.