가장자리를 부드럽게 어둡게 해 중심 피사체에 시선을 모읍니다.
<div class="scene">
<i class="sun"></i><i class="ridge far"></i><i class="ridge near"></i>
<div class="tower"><i></i></div>
<span class="label">CENTER STAYS CLEAR</span>
<span class="edge-note">SOFT EDGE FALL-OFF</span>
<div class="vignette"></div>
</div>.scene{position:absolute;inset:0;overflow:hidden;background:linear-gradient(180deg,#91c5c4 0%,#d8d5ad 53%,#efbe79 100%)}
.sun{position:absolute;left:50%;top:15%;width:clamp(35px,19vmin,110px);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:#ffe5a5;box-shadow:0 0 44px rgba(255,228,168,.5)}
.ridge{position:absolute;left:-10%;right:-10%;bottom:-25%;height:63%;border-radius:50% 50% 0 0}
.far{background:#719a82;transform:rotate(-4deg) translateY(-12%)}
.near{background:#426e60;transform:rotate(3deg)}
.tower{position:absolute;z-index:1;left:50%;bottom:21%;width:clamp(18px,7vmin,42px);height:31%;transform:translateX(-50%);background:#f6ead0;clip-path:polygon(22% 0,78% 0,100% 100%,0 100%);box-shadow:0 0 0 1px rgba(36,31,25,.25)}
.tower i{position:absolute;left:34%;top:13%;width:32%;height:12%;background:var(--accent-3)}
.label,.edge-note{position:absolute;z-index:3;color:#fff8e8;font:700 clamp(8px,2.8vmin,13px)/1.2 ui-monospace,monospace;letter-spacing:.1em;text-shadow:0 1px 5px rgba(0,0,0,.48);white-space:nowrap}
.label{left:5%;top:6%}.edge-note{right:5%;bottom:6%;color:#fff2d4}
.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 54% 62% at 50% 48%,transparent 45%,rgba(5,8,10,.05) 72%,rgba(5,8,10,.28) 124%);opacity:0;animation:shade 3.6s ease-in-out infinite}
@keyframes shade{0%,12%{opacity:0}34%,73%{opacity:.9}94%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.vignette{animation-duration:8s}}종이의 가운데는 밝게 두고 가장자리만 살짝 그늘지게 만든 듯한 효과입니다. 프레임 전체가 아니라 중심과 주변의 밝기 차이로 시선을 모읍니다.
편집기의 비네팅 효과를 더하거나, 웹에서 투명한 방사형 그라데이션을 장면 위에 얹습니다. 중심 위치와 가장자리의 농도를 조절하고, 필요하면 키프레임으로 천천히 나타나게 합니다.
렌즈에서 생기는 어두워짐을 흉내 낼 수도 있지만, 편집에서 만든 효과와 실제 광학 현상은 다릅니다. 검은 테두리처럼 보이지 않도록 약하게 두고 가장자리의 중요한 정보도 살려 두세요.
중앙의 인물이나 사물로 시선을 부드럽게 모을 때 쓰세요. 화면 가장자리의 글자나 동작이 묻히지 않을 만큼만 어둡게 하세요.