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

テキストを入力し、速度・強度・色ずれ・フォントサイズを調整すると、その場でグリッチ効果をプレビューでき、そのまま使えるHTML+CSSコードが得られます。ランディングページのタイトルやバナーにレトロ・サイバーパンク風の演出を加えたいデザイナーやコーダーに便利で、処理はすべてブラウザ内で完結しサーバーには送信されません。

使い方

1. グリッチさせたいテキストを入力します。
2. 速度・強度・色ずれ・フォントサイズのスライダーと2色を調整してお好みの見た目にします。
3. 🎲 ランダム化ボタンでグリッチのパターンを変更できます。
4. プレビューが気に入ったらHTML+CSSコードをコピーしてプロジェクトに貼り付けます。

よくある質問

生成されたコードはどこに貼り付ければいいですか?

HTMLは表示したい場所に、CSSはスタイルシートまたはstyleタグに貼り付けます。divのclassとdata-text属性には同じテキストを入力する必要があります。

テキストを変えるとアニメーションの形も変わりますか?

いいえ、アニメーションパターンはシード値から生成され、テキスト内容とは無関係です。パターンを変えたい場合は🎲ランダム化ボタンを使ってください。

このツールはテキストをサーバーに送信しますか?

いいえ、入力内容と設定はすべてブラウザ内でのみ処理され、外部には送信されません。