색수차

Chromatic aberration

렌즈가 색마다 빛을 다르게 굴절시켜 가장자리에 빨강·파랑이 번져 보이는 광학 현상. 지금은 레트로·글리치 연출로 일부러 씁니다.

다른 이름: RGB splitLens fringing

···

html

<div class="ab" data-text="ABERRATION">ABERRATION</div>

css

.ab{position:relative;font-size:clamp(22px,6vmin,34px);font-weight:800;color:#fff;letter-spacing:.02em}
.ab::before,.ab::after{content:attr(data-text);position:absolute;inset:0;mix-blend-mode:screen}
.ab::before{color:#ff2d55;animation:ra 2.6s ease-in-out infinite}
.ab::after{color:#22d3ee;animation:ba 2.6s ease-in-out infinite}
@keyframes ra{0%,100%{transform:translate(0,0)}50%{transform:translate(-3px,1px)}}
@keyframes ba{0%,100%{transform:translate(0,0)}50%{transform:translate(3px,-1px)}}

원본을 R, G, B 채널로 나눠 각각 다른 방향으로 살짝 어긋나게 겹치면 재현됩니다. CSS 에서는 같은 텍스트를 색만 다르게 겹쳐 쌓고 mix-blend-mode: screen 과 미세한 translate 로 흉내 냅니다.

SVG 필터의 feColorMatrix 로 채널을 실제로 분리한 뒤 feOffset 을 각각 다르게 주면 사진에도 적용할 수 있는 더 정확한 버전이 됩니다.

언제 쓰나

글리치·Y2K·VHS 무드의 타이틀에 씁니다. 과용하면 그냥 못생겨 보이니 호버·인트로 같은 짧은 순간에만 쓰세요.