Design Atlas
한국어
✦ Visual effects

Bokeh

보케

The soft, round discs a camera renders for points of light that fall outside the focal plane — recreated on screen as a dreamy, twinkling light backdrop.

Also known as: Bokeh lightsOut-of-focus lightsDefocused background
···
html
<div class="bokeh"><i></i><i></i><i></i><i></i><i></i><i></i></div>
css
.bokeh{position:absolute;inset:0}
.bokeh i{position:absolute;border-radius:50%;filter:blur(3px);animation:twinkle 4s ease-in-out infinite}
.bokeh i:nth-child(1){width:70px;height:70px;left:8%;top:16%;
  background:radial-gradient(circle at 35% 35%,#fff2c4,transparent 70%);animation-delay:0s}
.bokeh i:nth-child(2){width:40px;height:40px;left:28%;top:62%;
  background:radial-gradient(circle at 35% 35%,#ffd1e8,transparent 70%);animation-delay:.6s}
.bokeh i:nth-child(3){width:95px;height:95px;left:52%;top:8%;
  background:radial-gradient(circle at 35% 35%,#c9d6ff,transparent 70%);animation-delay:1.1s}
.bokeh i:nth-child(4){width:55px;height:55px;left:70%;top:55%;
  background:radial-gradient(circle at 35% 35%,#ffffff,transparent 70%);animation-delay:1.6s}
.bokeh i:nth-child(5){width:30px;height:30px;left:85%;top:22%;
  background:radial-gradient(circle at 35% 35%,#c9ffe8,transparent 70%);animation-delay:2s}
.bokeh i:nth-child(6){width:65px;height:65px;left:42%;top:76%;
  background:radial-gradient(circle at 35% 35%,#ffe3c4,transparent 70%);animation-delay:2.4s}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.9)}50%{opacity:.9;transform:scale(1.08)}}

Blur several differently-sized circles and fade their opacity on independent cycles, and it reads as defocused points of light. In a real lens, the disc's roundness depends on the aperture shape (hence "hexagonal bokeh" on some lenses).

CSS can't reproduce a real aperture's polygon shape, but a plain circular approximation is more than enough as decorative texture.

When to use

Use for a dark hero background, holiday/event moods, photo overlay decoration. Keep it subtle behind content — in the foreground it hurts legibility.