CSS文本故障风格效果生成器
在浏览器内生成CSS文字故障效果，支持主色与双偏移色、偏移强度和动画周期，提供实时预览、HTML／CSS复制和减少动态规则。
Up to 80 characters. The copied HTML stores this value in both text content and a data-text attribute for CSS pseudo-elements.
Slower cycles avoid a rapid flashing effect.
LIVE PREVIEW
Offset text layers
SIGNAL LOST
The animation is decorative. The preview keeps one readable text node, while the color layers are CSS pseudo-elements.
The generated CSS uses ::before and ::after with content: attr(data-text). If your content changes dynamically, keep the visible text and data-text synchronized. Respect prefers-reduced-motion and avoid using animated distortion for essential content.
使用步骤
如何使用
- Enter display text and choose its main, left-offset, and right-offset colors.
- Adjust offset strength and cycle speed while reviewing the readable layered preview.
- Copy the HTML and CSS, then keep text content and its data-text attribute synchronized in your project.
A restrained CSS-only offset effect
This generator creates one visible text node plus two CSS pseudo-elements with contrasting offsets. Short clip-path changes create occasional distortion during a deliberately slow cycle rather than a high-frequency flash. The effect uses standard CSS properties and needs no canvas, image, SVG, external font, stylesheet, or script request.
Accessible text and data-text limits
The actual text remains in the document, while pseudo-elements read content from attr(data-text). CSS cannot automatically mirror normal text into that attribute, so update both values together when text changes. The copied CSS includes prefers-reduced-motion to stop animation and leave a static, lower-opacity offset treatment. Keep animated effects decorative and do not put essential instructions, status, or time-sensitive information inside distortion.
常见问题
你可能还想知道
Why does the HTML repeat the text in data-text?
CSS pseudo-elements cannot duplicate an element’s text node directly. The data-text attribute supplies their content through attr(data-text), while the actual element text remains readable HTML.
Does reduced motion remove the message?
No. The main text remains visible. The generated reduced-motion rule stops pseudo-element animation and leaves a stable, subdued offset treatment.
Will this look identical in every browser?
Modern browsers support generated content, transforms, clip-path, and media queries, but font rendering and anti-aliasing vary. Test the final effect in the browsers and display sizes your audience uses.