色差分离 / RGB 分离Chromatic Aberration / RGB Split
红绿蓝通道错位叠印，产生 CRT 与镜头色散般的重影，配噪点与扫描线。作为点缀极有张力，大段文字会不可读。
典型场景实验视觉 · 音乐封面 · 故障艺术
编号67
年代2020s Retro-Tech
复杂度Medium
默认模式深色
效果示例
Nova
产品方案定价
开始使用
Design System
同一套组件
不同的性格
色彩、字体、圆角与材质，决定了界面的气质。
主要操作次要操作
标签 A标签 B+12
月度增长
+24.8%
转化率4.2%
客单价¥328
Aa Bb Cc 0123
按钮 / ButtonPrimaryGhost
输入 / Inputname@example.com
标签 / Chip已选中默认+8
进度 / Progress
开关 / Switch
数值 / Numeric1,284.50
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。
风格描述
红绿蓝通道错位叠印，产生 CRT 与镜头色散般的重影，配噪点与扫描线。作为点缀极有张力，大段文字会不可读。
关键词
RGB splitcolor fringingglitchretro techVHSanalog errordistortionlens effect
效果与动效
RGB offset animation, glitch timing, scan line movement, noise flicker, distortion on hover
设计系统变量
--rgb-offset2px--red-channel#FF0000--green-channel#00FF00--blue-channel#0000FF--glitch-duration0.3s--scanline-opacity0.1配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
Offset RGB: Red #FF0000, Green #00FF00, Blue #0000FF, Black #000000
辅色 / Secondary
Neon accents, scan lines, noise overlays, error colors
强调色在页面底色上的对比度约 5.1:1，可用于正文与图标。
适用场景
适合 / Best For
- Music platforms
- gaming
- tech brands
- creative portfolios
- nightlife
- entertainment
- video platforms
避开 / Do Not Use For
- Corporate
- healthcare
- finance
- accessibility-critical
- elderly users
框架兼容
customgsap
能力矩阵
浅色模式支持
深色模式支持
移动适配需额外处理
转化导向强High
渲染成本低无额外开销
无障碍风险高contrast-text-4.5 / keyboard / visible-focus / reduced-motion
实现要点
落地清单
- RGB split visible,
- Glitch effect controlled,
- Scan lines subtle,
- Performance ok,
- Readability maintained,
- Reduced motion option
CSS / 技术关键词
filter: drop-shadow with offset colors, text-shadow: RGB offset (-2px 0 red, 2px 0 cyan), animation: glitch (random offset), ::before for scanlines, mix-blend-mode: screen for overlays
AI 提示词
Design with chromatic aberration RGB split effect. Use: color channel offset (R/G/B), glitch aesthetic, retro tech feel, VHS error look, lens distortion, scan lines, noise overlay, analog imperfection.