카메라가 초점을 벗어난 빛 점을 동그랗고 부드러운 원반으로 담아내는 현상. 배경을 흐릿하게 반짝이는 조명 장식으로 흉내 냅니다.
디자인 아틀라스<div class="bokeh"><i></i><i></i><i></i><i></i><i></i><i></i></div>.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)}}크기가 다른 원 여러 개에 filter: blur() 를 걸고, 저마다 다른 주기로 불투명도를 깜빡이게 하면 초점이 나간 조명처럼 보입니다. 원이 크고 흐릴수록, 조리개가 둥근 렌즈일수록 보케가 더 동그랗고 부드럽습니다.
CSS 로는 진짜 렌즈 조리개의 다각형 모양(육각형 보케 등)까지는 못 만들지만, 원형 근사만으로도 배경 장식으로는 충분합니다.
다크 히어로 배경, 연말/이벤트 무드, 사진 오버레이 장식에 씁니다. 콘텐츠 뒤에서 은은하게 — 전경에 두면 가독성을 해칩니다.