Glitch Generator

テキスト設定

60px
5

エクスポートオプション

ライブプレビュー

グリッチエフェクト
生成されたコード
/* CSS for your glitch effect */ .your-glitch-class { position: relative; color: #000000; font-size: 60px; font-weight: bold; } .your-glitch-class::before, .your-glitch-class::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .your-glitch-class::before { left: 2px; text-shadow: -1px 0 #00CEFF; animation: glitch-anim 2s infinite linear alternate-reverse; } .your-glitch-class::after { left: -2px; text-shadow: -1px 0 #FF2E63; animation: glitch-anim2 3s infinite linear alternate-reverse; opacity: 0.7; } @keyframes glitch-anim { 0% { clip: rect(42px, 9999px, 28px, 0); } 20% { clip: rect(62px, 9999px, 58px, 0); } 40% { clip: rect(33px, 9999px, 37px, 0); } 60% { clip: rect(59px, 9999px, 71px, 0); } 80% { clip: rect(1px, 9999px, 14px, 0); } 100% { clip: rect(42px, 9999px, 73px, 0); } } @keyframes glitch-anim2 { 0% { clip: rect(25px, 9999px, 50px, 0); } 20% { clip: rect(33px, 9999px, 44px, 0); } 40% { clip: rect(70px, 9999px, 90px, 0); } 60% { clip: rect(2px, 9999px, 14px, 0); } 80% { clip: rect(60px, 9999px, 76px, 0); } 100% { clip: rect(42px, 9999px, 50px, 0); } }

Glitch Examples

CYBERPUNK

サイバーパンクスタイル

ゲームタイトル、ポスターなど、未来的なエッジが必要なものに最適です。

強いグリッチ
HACKED

ハッカーの美学

セキュリティをテーマにしたデザインのために、邪魔で誤動作した外観を作成します。

強烈なグリッチ
レトロゲーム

レトロゲーム

ノスタルジックな80年代/90年代のゲームスタイルにモダンなグリッチのひねりを加えました。

ミディアムグリッチ
BROKEN

デジタル誤動作

デジタルディスプレイの破損または損傷をシミュレートします。

カオスグリッチ
SUBTLE

微妙なグリッチ

エッジのヒントが必要なプロフェッショナルなデザインのための、より洗練されたグリッチエフェクト。

ソフトグリッチ
ERROR 404

エラー画面

技術的なグリッチ感のある注目を集めるエラーページを作成します。

システムの不具合

How to Use

実装ガイド

1
あなたのグリッチを生成する

コントロールを使用して、グリッチ効果をカスタマイズします。テキスト、サイズ、強度、色を調整して、完璧な外観を作成します。

2
生成されたコードのコピー

「CSSをコピー」ボタンと「HTMLをコピー」ボタンをクリックして、グリッチエフェクトのコードを取得します。

3
プロジェクトに追加する

CSS をスタイルシートに貼り付け、HTML をエフェクトを表示するテンプレートに貼り付けます。

4
さらにカスタマイズ

CSS のアニメーションのタイミング、色、または位置を変更して、特定のデザインニーズに合わせて効果を微調整します。

よくあるご質問

これはすべてのブラウザと互換性がありますか?

The glitch effect uses modern CSS features (CSS animations and text-shadow) which are supported in all modern browsers. Internet Explorer does not fully support these features.

これを商用利用することはできますか?

はい、生成されたコードは、個人用と商用目的の両方で無料で使用できます。帰属表示は必要ありません。

グリッチの強度を調整するにはどうすればいいですか?

強度スライダーは、アニメーションの速度とテキストの影の距離を制御します。値を大きくすると、グリッチ効果がより顕著になります。

これを自分のフォントで使用できますか?

そうですよ！ジェネレーターは、コアグリッチエフェクトコードを提供します。CSS フォントのプロパティを変更することで、好みのフォントを使用して任意のテキストに適用できます。

私のサイトでグリッチ効果が機能しないのはなぜですか?

CSS と HTML が正しく実装されていることを確認します。要素にはdata-text表示されているテキストに一致する属性。また、グリッチスタイルを上書きしている可能性のあるCSSの競合も確認してください。

About This Tool

このCSSグリッチテキストエフェクトジェネレーターを使用すると、Webプロジェクト用の魅力的でカスタマイズ可能なグリッチエフェクトを作成できます。見出し、ロゴ、または任意のテキスト要素にエッジの効いた未来的なタッチを追加するのに最適です。

主な機能

完全にカスタマイズ可能

グリッチ効果のあらゆる側面を、デザインのビジョンに合わせて調整します。

クリーンなコード出力

適切にフォーマットされた、本番環境に対応したCSSとHTMLを簡単に統合できます。

ライブプレビュー

調整を行うと、グリッチ効果がどのように見えるかを正確に確認できます。

レスポンシブデザイン

生成されたグリッチエフェクトは、すべての画面サイズで美しく機能します。

SVGエクスポート

グリッチテキストをSVGとしてダウンロードし、他のデザインツールで使用します。

カラーコントロール

ベーステキストとグリッチオーバーレイのカスタムカラーを選択します。

で作成そして現代のWebテクノロジー。JavaScriptライブラリは必要なく、純粋なCSSの魔法だけです。

Related Tools

CSSコンバーターへのレス

LessのコードをCSSに変換します。高速、簡単、安全。

SCSSからCSSへのコンバーター

SCSS コードを CSS に変換します。高速、簡単、安全。

CSS縮小ツール

CSSコードをプロフェッショナルな精度で圧縮および最適化

JSONエディター

大きなJSONを簡単に編集 - Lightning Fast & Smooth

美しいCSSボックスシャドウを簡単に作成

直感的なインターフェースで見事なボックスシャドウを生成します。CSSコードをコピーして、すぐにプロジェクトで使用できます。

ペースコンバーター

異なるユニット間でランニングペースを簡単に変換し、推定時間と距離を計算