CSSグリッチテキスト生成ツール
テキストを入力するだけでCSSグリッチアニメーションのコードを自動生成
テキストと速度、強さ、色ズレ、フォントサイズを調整すると、ブラウザ上でグリッチエフェクトをその場でプレビューでき、そのまま使えるHTML+CSSコードが手に入ります。ランディングページのタイトルやイベントバナーにレトロ・サイバーパンクな雰囲気を出したいデザイナーやコーダーに便利で、計算はすべてブラウザ内だけで行われ、サーバーには送信されません。
도구를 불러오는 중…
🔒 すべてブラウザ内で処理されます。アップロードしたファイルや入力内容がサーバーに送信されることはありません。
使い方
- グリッチ表示させたいテキストを入力します。
- 速度、強さ、色ズレ、フォントサイズのスライダーと2色のカラーを調整して、好みの雰囲気に合わせます。
- 🎲 パターン変更ボタンで、グリッチの形をランダムに切り替えられます。
- プレビューが気に入ったら、HTML+CSSコードをコピーしてプロジェクトに貼り付けます。
よくある質問
- 生成されたコードはどこに貼り付ければいいですか？
- HTMLは表示したい位置に、CSSはスタイルシートまたはstyleタグに入れてください。divのclassとdata-text属性に同じテキストを入れないと、エフェクトが正しく動きません。
- テキストを変えるとアニメーションの形も変わりますか？
- アニメーションのパターン自体はシード値をもとに計算されるため、テキストの内容とは無関係です。パターンだけ変えたい場合は🎲 パターン変更ボタンを押してください。
- このツールはサーバーにデータを送信しますか？
- いいえ。入力したテキストと設定値はすべてブラウザ内だけで処理され、外部に送信されることはありません。