비네트

Vignette

이미지·화면의 가장자리를 어둡게 만들어 시선을 중앙으로 모으는 기법. 카메라 렌즈의 광량 감쇠 현상에서 유래했습니다.

다른 이름: Edge darkeningCorner shading

···

html

<div class="photo"><div class="vig"></div></div>

css

.photo{position:relative;width:min(300px,85%);aspect-ratio:16/10;border-radius:14px;overflow:hidden;
  background:linear-gradient(135deg,#ffb648,#ff5c8a 50%,#5b5bf7)}
.vig{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 35%,rgba(0,0,0,.75) 100%);
  animation:pulse 4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.15}50%{opacity:1}}

중앙은 투명하고 가장자리로 갈수록 어두워지는 radial-gradient 를 이미지 위에 겹치기만 하면 됩니다. box-shadow: inset 을 큰 blur·spread 로 줘도 비슷하게 만들 수 있습니다.

반경과 불투명도로 세기를 조정합니다 — 너무 강하면 사진처럼 보이지 않고 그냥 어두운 액자처럼 보입니다.

언제 쓰나

히어로 이미지, 인물 사진, 모달 뒤 배경에 집중을 모을 때 씁니다.