Chromatic aberration

색수차

An optical flaw where a lens bends different wavelengths by different amounts, fringing edges with red and blue. Now used intentionally for a retro or glitchy look.

Also known as: 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)}}

Recreated by splitting the source into R, G, B channels and offsetting each slightly in a different direction before recombining. In CSS it's faked by stacking the same text in different colours with mix-blend-mode: screen and a tiny translate offset each.

A more accurate version for photos actually separates channels with an SVG feColorMatrix filter and offsets each with feOffset.

When to use

Use for glitch/Y2K/VHS-mood titles. Overuse just looks messy — keep it to short moments like a hover or intro.