Design Atlas
한국어
◧ Film & photo

How bokeh forms

보케의 원리

Points of light outside the focal plane spread into round (or polygon-shaped) discs that trace the aperture's shape — the farther from focus, the bigger the disc.

Also known as: BokehCircle of confusionDefocus blur
···
html
<div class="stage">
  <div class="subject"></div>
  <div class="pts" id="pts">
    <i style="left:14%;top:20%;background:#fff6c4"></i>
    <i style="left:30%;top:58%;background:#ffd1e8"></i>
    <i style="left:70%;top:16%;background:#c9d6ff"></i>
    <i style="left:84%;top:52%;background:#c9ffe8"></i>
    <i style="left:58%;top:76%;background:#ffe3c4"></i>
  </div>
  <div class="tag" id="tag">In focus</div>
</div>
css
.stage{position:absolute;inset:0;background:#0c0c14;overflow:hidden}
.pts{position:absolute;inset:0}
.pts i{position:absolute;width:7%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);
  opacity:1;transition:width 1.2s ease,filter 1.2s ease,opacity 1.2s ease}
.pts.defocused i{width:22%;filter:blur(4px);opacity:.65}
.subject{position:absolute;left:38%;bottom:0;width:24%;height:62%;border-radius:50% 50% 8% 8%/60% 60% 6% 6%;
  background:#05050a;box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.tag{position:absolute;left:7%;bottom:6%;font:700 11px ui-monospace,monospace;color:#e8e8f0;
  background:rgba(255,255,255,.08);padding:3px 9px;border-radius:20px}
js
const pts=document.getElementById('pts');
const tag=document.getElementById('tag');
function toggle(){
  const on=pts.classList.toggle('defocused');
  tag.textContent=on?'Out of focus':'In focus';
}
setInterval(toggle,1700);

When a camera focuses at some distance, a point of light outside that distance doesn't land on the sensor as a perfect point — it spreads into a disc, the circle of confusion. That disc's shape actually follows the aperture's blade count, which is why some lenses produce pentagonal or hexagonal bokeh.

The demo cross-fades a light point between "in focus" (a tight dot) and "out of focus" (a large, soft disc), showing the same point of light change. The subject silhouette in front stays sharp throughout, contrasting the rule: only what sits on the focal plane stays crisp.

CSS can't reproduce a real aperture's polygon shape, but circles at varying sizes with blur and opacity get the impression across just fine. Unlike the purely decorative bokeh entry, this one shows the actual cause and effect — the same point growing as focus shifts away from it.

When to use

Use this to explain why background lights render as soft discs, or when discussing why rounder aperture blades give smoother bokeh.