CSS テキストグリッチジェネレーター

このツールは、テキストの背後で色がジッターしてずれる2つの疑似要素を使い、純粋なCSSだけでRGBカラーずれのアニメーショングリッチテキストエフェクトを作ります。テキストを入力し、2色のアクセントカラーを選び、グリッチの強度と速度を調整すると、アニメーションがライブでプレビューされ、生成されたCSSと必要な小さなHTML構造の両方をコピーできます。

このツールとは？

CSSグリッチエフェクトは、破損した放送信号や傷ついたVHSテープのような見た目を再現します。::beforeと::after疑似要素でテキストを2つ複製し、それぞれを色付きのtext-shadow（アナログRGB信号のエラーを想起させる、古典的な赤とシアン）でわずかにずらし、各コピーのclip-pathを@keyframesでアニメーションさせて、色付きコピーの異なる水平方向のスライスが時間とともに点滅するようにします。

この手法には画像も、JavaScriptのアニメーションループも、canvasも不要です——1つのHTML要素上で完結する純粋なCSSで、その要素は自分のテキストを2回保持します。1回は実際のテキストコンテンツとして、もう1回はdata-text属性として、疑似要素がcontent: attr(data-text)で読み取ります。

出典: CSS Pseudo-Elements Module Level 4, W3C — このエフェクトの基盤となる ::before/::after 疑似要素と attr() 関数を定義しています。

なぜこれを使うのか？

ライブアニメーションプレビュー——静的なモックアップではなく、入力して設定を調整するたびに実際のグリッチアニメーションを確認できます。
独立して調整できる2色のアクセントカラー。デフォルトは定番の赤/シアンですが、どんなブランドやテーマにも合わせてカスタマイズ可能です。
強度スライダーで色付きシャドウのピクセルオフセットを、速度スライダーでclip-pathキーフレームのサイクル速度を制御します。
エフェクトは表示テキストと一致するdata-text属性に依存するため、CSS（完全な@keyframesブロックを含む）と必要なHTML構造の両方をコピーします。
純粋なCSS——ページに設置すれば実行時にJavaScriptは不要で、外部ライブラリや画像の読み込みも必要ありません。
無料・登録不要で、すべてブラウザ内で動作します。

使い方

グリッチさせたいテキストをテキスト欄に入力すると、プレビューが即座に更新されます。
2色のアクセントカラーを選びます。定番のデフォルトはレトロなRGBずれ感を出す赤とシアンですが、コントラストのある2色ならどれでも機能します。
強度スライダーを調整して、2つの色レイヤーがどれだけ離れるかを制御します——値が大きいほどより激しいグリッチに感じられます。
速度スライダーを調整して、グリッチがどれだけ速く点滅するかを制御します。
CSSブロックをコピーしてスタイルシートに貼り付けます。
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; ... }

ベースのテキストは白のままで、2つの疑似要素コピーが左右で赤とシアンに点滅し、破損した信号のような定番の見た目を作ります。

要素にdata-text属性が必要な理由

::beforeと::after疑似要素は、要素の通常のテキストコンテンツを直接読み取ることができません——CSSのcontent: attr()は実際のHTML属性にのみ機能し、子のテキストノードには機能しません。そのため、生成されたHTMLは同じ要素にdata-text="..."属性として同じテキストを繰り返し記述します。表示テキストは通常どおりレンダリングされ、各疑似要素はcontent: attr(data-text)を通じて同じ文字列を独立して取得し、それぞれ色をずらしてアニメーションさせたコピーを重ねます。

点滅の仕組み

各疑似要素は、一連のclip-path: inset(...)の値を順に進める独自の@keyframesブロックでアニメーションされます。各キーフレームで色付きコピーの異なる水平方向の帯が表示され、それ以外はクリップされるため、見えている赤（またはシアン）の断片がアニメーション中に上下に飛び跳ねます——色付きシャドウのオフセットと組み合わさることで、柔らかい発光ではなく、破れてずれたカラーチャンネルのように見えます。

このエフェクトが向いている場面

ゲーム、サイバーパンク、配信、音楽ブランドのランディングページのヒーロー見出し。
404・エラーページ——グリッチが「何かが壊れた」というテーマを強調します。
見出しやロゴのhover・focus状態で、短く目を引くアクセントとして。
読み込み中や「処理中」の状態で、システムが動いていることを伝える手段として。
本文テキストには控えめに使うこと——このエフェクトは意図的にひと目では読みにくくしてあるため、段落ではなく短い見出しやロゴタイプに使うのが最も効果的です。

他のCSSツールとの組み合わせ

グリッチ見出しは、多くの場合、より大きなダークで高コントラストなレイアウトの中の1要素にすぎません。より仕上がったルックスにするには、下にある他のCSSツールで作った柔らかいグロー影や角丸のカードと組み合わせてみてください。

→ Box Shadow ジェネレーター · Border Radius ジェネレーター

よくある質問

なぜデフォルトの色は赤とシアンなのですか？

赤とシアンは、破損したアナログ映像や初期のデジタル信号エラーで見られる古典的なRGBチャンネルのずれを模しており、これが「グリッチ」エフェクトの視覚言語の元々の由来です。任意の2色に変更できますが、コントラストの強い色相の方がカラーずれとしてはっきり見えます。

このエフェクトにJavaScriptは必要ですか？

いいえ——CSSがページに設置されれば、グリッチは@keyframesで駆動される純粋なCSSアニメーションです。JavaScriptはこのツール自体がブラウザ内でライブプレビューを更新し、コピー可能なコードを生成するためだけに使われます。

CSSを自分のプロジェクトに貼り付けてもエフェクトが表示されないのはなぜですか？

最もよくある原因は、data-text属性が欠けているか一致していないことです。疑似要素は要素自体のテキストコンテンツではなく、data-text="..."に設定された文字列をレンダリングするため、両方を設定し、大文字小文字を含めて完全に一致させる必要があります。

divではなくh1のような見出しタグにも適用できますか？

はい——この手法は、::before/::after疑似要素とdata-text属性を受け付けるインラインまたはブロック要素であれば何にでも使えます。divの代わりに、h1やspanなどの要素に同じクラスとdata-text属性を適用するだけです。

強いグリッチエフェクトはアクセシビリティやSEOに悪影響を与えますか？

背後にあるテキストコンテンツは実際に選択可能な本物のテキストのままなので、スクリーンリーダーや検索エンジンは視覚的なアニメーションに関係なく通常どおり読み取ります。点滅の動きに敏感なユーザーへの配慮として、prefers-reduced-motionを尊重し、そうしたユーザー向けにアニメーションを無効化または遅くすることを検討してください。