CSS グリッチテキストエフェクトジェネレータ
アニメーション化されたCSSグリッチテキストエフェクト（色分離、クリップ帯、ジッターまたはフリッカー）を生成します。独自のテキスト、色、サイズ、強度、速度で生成できます。すぐに使えるCSS + HTMLをコピーします。
入力
要素のテキストとして表示され、またその data-text 属性にも表示されます。この属性はエフェクトレイヤーによって読み取られます。
クリップ帯エフェクトは単色の背景でレイヤーを描画するため、実際の背景と一致する必要があります。
グリッチレイヤーが移動する距離（ピクセル単位）。フォントサイズに合わせてスケーリングします。
1つの完全なアニメーションサイクルの長さ（0.2～5秒）。ループが短いほどフレネティック感が出ます。
出力
グリッチテキストがここに表示されます。
実際に生成されたエフェクトで、@keyframesが実際にアニメーション化するようにシャドウDOMに分離されています。
このツールを使う他の方法
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-glitch-text-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"text": "GLITCH",
"effect": "chromatic",
"fontSize": "80",
"fontFamily": "mono",
"textColor": "#ffffff",
"bgColor": "#222222",
"glitchColor1": "#00ffff",
"glitchColor2": "#ff00ff",
"intensity": "4",
"duration": "1.5"
}'ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。
AIエージェントに依頼する
Use the IOTools `css-glitch-text-generator` tool (CSS Glitch Text Effect Generator) on this input:
YOUR_INPUT_HEREIOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。
埋め込みウィジェット
<iframe
src="https://iotools.cloud/embed/css-glitch-text-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSS グリッチテキストエフェクトジェネレータ — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。
| API/MCP 1回あたりの費用 | 5クレジットから |
|---|---|
| クレジットが足りませんか? | 料金を見る |
次の方法でも利用可能
ガイド
概要
CSS グリッチテキストエフェクトジェネレータは、アニメーション化されたグリッチテキスト（RGB分離、破れた帯、VHS エラーのような外観）を、自己完結した CSS + HTML スニペットとして作成します。テキストを入力し、4 つのエフェクトの 1 つを選択し、色、サイズ、強度、ループ速度を設定して、2 つのブロックをプロジェクトにコピーします。
画像、フォントファイル、JavaScript、またはアニメーションライブラリは不要です。エフェクト全体は text-shadow、clip-path、transform、および CSS @keyframes ループです。
4 つのエフェクト
- 色分離 — 2 つのグリッチ色が各フレームでグリフの両側をスライドし、古典的な未配置印刷 / アナグリフの外観を生み出します。低強度では微妙、高強度では攻撃的です。
- クリップ帯 — 本物のグリッチ：テキストの 2 つの追加コピー（
data-text属性の::beforeと::afterで描画）がclip-path: inset()で水平帯にスライスされ、レジスタ外に移動するため、単語のスライスが外れて戻るように見えます。 - ジッター・スキュー — ブロック全体がハードステップでシェイクしてスキューし、色分離がフラッシュします。404 またはエラー状態に適しています。
- フリッカー — 故障するネオンサイン。テキストが暗くなり、不規則なスケジュールで再度点灯し、エッジに色の出血があります。
強度の仕組み
強度は、エフェクトの各レイヤーが移動するピクセル単位での距離です。text-shadow オフセット、クリップ帯レイヤーの left オフセット、ジッターの translate 距離をスケーリングします。経験則として、フォントサイズの約 5% を保つようにしてください。80px の場合は約 4px です。その後、ヒーロー画像の場合は高く、読み取り可能にしたいもの場合は低くします。
モーション アクセシビリティ
高速で高コントラストのモーションは、片頭痛と前庭症状の既知のトリガーであり、グリッチループは Web タイポグラフィと同じくらい高速で高コントラストです。したがって、このツールが生成するすべてのスニペットは、animation: none を設定する @media (prefers-reduced-motion: reduce) ブロックで終わるため、モーション削減を要求するシステムを持つ人は、テキストがクリーンな静的状態に戻ります。CSS を貼り付けるときはこのブロックを保持します。
使い方
- テキストを入力します。要素のテキストと
data-text属性の両方に書き込まれます。クリップ帯レイヤーがこれを読み取ります。 - グリッチエフェクトを選択し、フォントサイズとフォントを設定します。
- 色を選択します：テキスト、背景、2 つのグリッチカラー（シアン/マゼンタが標準的なペアリング）。
- 強度とループ期間を調整します。ショートループはより熱狂的に見えます。
- CSS をスタイルシートにコピーし、HTML をマークアップにコピーします。
FAQ
スニペットが背景色を設定するのはなぜですか？ クリップ帯エフェクトは、2 つの重複レイヤーを単色の背景で描画して、スライスが下の元のテキストをマスクします。その色が要素の後ろに実際にあるものと一致しない場合、シームが見えます。背景色を実際のページの背景に設定するか、生成された CSS が適用する要素自体の背景を保持します。
生成された <div> の代わりに既存の要素で使用できますか？
はい。class="io-glitch" と同じテキストを保持する data-text 属性を追加します。data-text 値はエフェクトレイヤーが複製するものなので、表示されるテキストと一致する必要があります。そうでないと、破れが間違った文字を表示します。
複数行のテキストで機能しますか？ エフェクトは単一行（見出し、ロゴ、404）向けに設計されています。クリップレイヤーは要素ボックスに対して配置されるため、長いラップされた段落は不整列に見えます。
何かがアップロードされますか？ いいえ。スニペットはブラウザで入力した値から生成されます。サーバーに何も送信されたり、保存されたりしません。
関連ツール
別の純粋な CSS タイプエフェクトについては、グラデーションテキスト CSS ジェネレータをお試しください。グリッチされた文字（CSS ではなくグリッチされたスタイル）が必要な場合は、チャットまたはバイオに貼り付けた時点で壊れたままのテキストは、Zalgo テキストジェネレータが CSS の代わりに Unicode 結合マークを使用してそれを実行します。独自のアニメーション曲線を作成するには、CSS キーフレームアニメーション ジェネレータを使用し、CSS Minifier & Beautifierで完成したスタイルシートを縮小します。