CSS 文字故障风生成器

工具介绍

CSS 故障（glitch）效果模拟信号损坏或磁带划痕的视觉观感：用 ::before 和 ::after 伪元素把文字复制两份，各自叠加一层彩色 text-shadow（经典配色是红和青，呼应模拟信号的 RGB 错位失真），再用 @keyframes 分别动画化每份的 clip-path，让不同颜色的水平切片随时间闪烁出现。

这个技术不需要图片、不需要 JavaScript 动画循环、也不需要 canvas——纯靠 CSS 叠加在一个元素上，这个元素要把文字保留两份：一份是正常的文字内容，另一份写在 data-text 属性里，供伪元素通过 content: attr(data-text) 读取。

来源：CSS Pseudo-Elements Module Level 4，W3C——定义了 ::before/::after 伪元素以及 attr() 函数，这个效果正是基于它们构建的。

为什么使用它？

• 实时动画预览——输入文字、调整参数时直接看到真实的故障动画效果，而不是静态效果图。
• 两个可独立调整的强调色，默认经典红/青 RGB 错位配色，也可以改成任意品牌色或主题色。
• 强度滑块控制彩色阴影的像素偏移量，速度滑块控制 clip-path 关键帧的循环快慢。
• 同时复制 CSS（含完整 @keyframes）和所需的 HTML 结构——因为这个效果依赖 data-text 属性与可见文字保持一致。
• 纯 CSS 实现——放到页面上之后不需要任何运行时 JavaScript，也不用加载外部库或图片。
• 免费、不用注册，全部在浏览器本地运行。

使用方法

1. 在文字输入框里输入想要故障化的文字——预览会立即更新。
2. 选两种强调色；经典默认值是红色和青色，营造复古 RGB 错位感，但任意两种对比色都能用。
3. 调整强度滑块，控制两层彩色图层之间的错位距离——数值越大，故障感越强烈。
4. 调整速度滑块，控制故障闪烁的快慢。
5. 复制 CSS 代码块，粘贴到你的样式表里。
6. 复制 HTML 片段并原样使用——data-text 属性必须和元素可见文字完全一致，效果才能生效。

示例

输入

文字："GLITCH" · 颜色 1：#ff0040（红）· 颜色 2：#00fff9（青）· 强度：5px

输出

<div class="glitch" data-text="GLITCH">GLITCH</div>
.glitch::before { text-shadow: 5px 0 #ff0040; ... }
.glitch::after { text-shadow: -5px 0 #00fff9; ... }

基础文字保持白色，两个伪元素副本分别在两侧闪烁出红色和青色，形成经典的信号损坏观感。

为什么元素需要 data-text 属性

::before 和 ::after 伪元素无法直接读取元素的常规文字内容——CSS 的 content: attr() 只能读取真正的 HTML 属性，读不到子文本节点。所以生成的 HTML 会把文字再写一份到 data-text="..." 属性里：可见文字照常渲染，而每个伪元素各自通过 content: attr(data-text) 取到同一段文字，叠加上自己的变色、动画副本。

闪烁效果是怎么做出来的

每个伪元素都用自己的 @keyframes 步进一系列 clip-path: inset(...) 数值。每一帧只显示彩色副本的某一段水平切片，其余部分被裁掉，于是可见的红色（或青色）碎片在动画播放时上下跳动——配合彩色阴影的位移，整体效果读起来像撕裂错位的色彩通道，而不是柔和的发光。

适合用在哪里

• 游戏、赛博朋克、直播或音乐品牌落地页的主标题。
• 404 / 错误页面——用故障效果强化「出问题了」的主题。
• 标题或 logo 的 hover / focus 状态，做一个短暂吸睛的强调效果。
• 加载中 / 处理中状态，用故障感传达系统正在运行。
• 尽量少用在正文文字上——这个效果本身就故意做得不易一眼看清，用在短标题或 logo 文字上效果最好，不适合大段段落。

配合其他 CSS 工具一起用

故障风标题通常只是整体深色高对比布局中的一个元素。可以搭配下面 CSS 工具生成的柔和光晕阴影或圆角卡片，让整体效果更完整。

→ 盒阴影生成器 · 圆角生成器

常见问题