Chromatic Aberration / RGB Split
Also called: Glitch UI, RGB Shift, Channel Split
White type on near-black, with every edge split into red and cyan ghosts — scanlines, slice glitches and misaligned colour channels.
Design keywords
Say these words to ask for this style.
Chromatic Aberration fakes a lens or signal that cannot focus all colours at once: content is a monochrome white-on-black signal, and every headline, icon, card edge and button carries a hard red ghost to the left and a cyan ghost to the right. CRT scanlines run over the page, horizontal slice glitches tear the hero now and then, and labels read like channel diagnostics in a mono. Shapes are square and flat, with no neon bloom — the colour lives only in the misregistered channels.
Best for
- Game launches, esports and streaming overlays
- Music releases, festivals and nightlife
- Film/series teasers and trailers
- Hacker-themed events and creative portfolios
Avoid for
- Long reading, forms people must fill accurately
- Users sensitive to flicker or motion
- Healthcare, finance and anything needing calm trust
✓ Do
- Keep the base strictly monochrome (#07070B / #F4F4F8) so the split is the only colour
- Offset ghosts ±0.045em on display type (≈5-7px), ±2px on smaller headings, icons and boxes: red (#FF2E55) left, cyan (#00E5FF) right
- Thai labels and buttons: body font (Bai Jamjuree), no tracking, no uppercase
- Run glitch animation briefly (≤ 8% of a 4–6s loop) and only under prefers-reduced-motion: no-preference
✕ Don't
- Don’t split body text — only headings, numbers, icons and edges
- Don’t add soft neon glow or blur; ghosts are hard-edged
- Don’t animate continuously or flash faster than 3 times a second
Not to be confused with
On mobile
Keep the split on headings, icons and the active tab only; drop the full-screen scanline overlay opacity on small screens and never run the slice glitch on scrolling lists.
Prompt builder
Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.