CSSテキストグリッチジェネレーター - グリッチテキスト効果作成 オンライン
ライブプレビュー付きのピュアCSSグリッチテキストアニメーションを生成。カラースプリット、ノイズ、トランスフォーム効果を強度コントロールでカスタマイズ — 100%クライアントサイド、データ送信なし。
よくある質問
CSSテキストグリッチエフェクトとは何ですか？
CSSテキストグリッチエフェクトは、テキストが誤動作やグリッチしているように見せる純粋な視覚アニメーションです。デジタル信号の劣化やVHSテープのアーティファクトを模倣します。clip-pathスライシング、::before/::afterを使用したカラーチャンネル分離、transform: skew()による歪みなどのCSS技術を@keyframesアニメーションで実装します。生成された出力にJavaScriptは不要です。
このCSSテキストグリッチジェネレーターの使い方は？
グリッチエフェクトを適用したいテキストを入力します。エフェクトタイプを選択します。スライダーでグリッチの強度とアニメーション速度を調整します。テキスト色、背景色、2つのグリッチ色をカスタマイズします。プレビューエリアでリアルタイムに効果を確認します。生成されたHTMLとCSSコードをプロジェクトにコピーします。
このツールを使用する際、データは安全ですか？
はい。このツールはクライアントサイドJavaScriptを使用してブラウザ内で完全に動作します。テキスト内容、色の値、生成されたCSSコードはサーバーに送信されません。すべての処理はデバイス上でローカルに行われます。
clip-pathグリッチ技術はどのように機能しますか？
clip-pathノイズ技術は、テキストのどの水平スライスが表示されるかを素早く変更してデジタル劣化の外観を作成します。@keyframesを使用してclip-path: inset()値を複数のランダムな位置にアニメーションし、テキストの異なる水平バンドが表示・非表示になることでデータ劣化をシミュレートします。
サイバーパンク/ネオングリッチエフェクトの作り方は？
暗い背景でカラースプリット（RGB）エフェクトタイプを使用し、シアン（#00ffff）とマゼンタ（#ff00ff）を2つのグリッチ色として使用します。強度を5-7に設定します。プリセットタブのサイバーパンクネオンプリセットがワンクリックで自動適用されます。
グリッチエフェクトをアクセシブルにできますか？
はい。生成されたCSSアニメーションを@media (prefers-reduced-motion: reduce)ブロックでラップして、モーションの軽減を好むユーザー向けに無効化できます。また、スクリーンリーダーのためにアニメーションなしでもテキストが読めるようにしてください。
カラースプリット、ノイズ、トランスフォームエフェクトの違いは？
カラースプリット（RGB）は色付き疑似要素コピーを水平にオフセットして色収差を作成します。ノイズ（Clip-path）はアニメーションされたclip-path: inset()を使用して異なる水平バンドをランダムにスライスします。トランスフォーム（Skew）はアニメーションされたtransform: skew()とtranslate()を適用します。コンバインドは3つの技術をすべて組み合わせます。
コード例
// Generate CSS glitch effect - Color Split technique
function generateColorSplitGlitch(config) {
const { text, fontSize, textColor, bgColor, color1, color2, duration } = config;
const html = `<div class="glitch-wrapper">
<div class="glitch" data-text="${text}">${text}</div>
</div>`;
const css = `.glitch-wrapper {
display: flex;
align-items: center;
justify-content: center;
background: ${bgColor};
padding: 2rem;
}
.glitch {
position: relative;
font-size: ${fontSize}px;
font-weight: 700;
color: ${textColor};
letter-spacing: 0.05em;
}
.glitch::before,
.glitch::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.glitch::before {
color: ${color1};
animation: glitch-before ${duration}s infinite linear alternate-reverse;
clip-path: inset(0 0 0 0);
}
.glitch::after {
color: ${color2};
animation: glitch-after ${duration}s infinite linear alternate-reverse;
clip-path: inset(0 0 0 0);
}
@keyframes glitch-before {
0% { clip-path: inset(40% 0 61% 0); transform: translate(-2px, -1px); }
20% { clip-path: inset(92% 0 1% 0); transform: translate(1px, 2px); }
40% { clip-path: inset(43% 0 1% 0); transform: translate(-1px, 3px); }
60% { clip-path: inset(25% 0 58% 0); transform: translate(3px, 1px); }
80% { clip-path: inset(54% 0 7% 0); transform: translate(-3px, -2px); }
100% { clip-path: inset(58% 0 43% 0); transform: translate(2px, -3px); }
}
@keyframes glitch-after {
0% { clip-path: inset(65% 0 13% 0); transform: translate(2px, 1px); }
20% { clip-path: inset(79% 0 2% 0); transform: translate(-2px, -1px); }
40% { clip-path: inset(48% 0 38% 0); transform: translate(1px, -2px); }
60% { clip-path: inset(3% 0 83% 0); transform: translate(-1px, 3px); }
80% { clip-path: inset(22% 0 64% 0); transform: translate(3px, 2px); }
100% { clip-path: inset(10% 0 74% 0); transform: translate(-2px, 1px); }
}`;
return { html, css };
}
// Generate noise/clip-path keyframes with controllable intensity
function generateNoiseKeyframes(name, intensity, steps = 20) {
let keyframes = `@keyframes ${name} {\n`;
for (let i = 0; i <= steps; i++) {
const percent = Math.round((i / steps) * 100);
const maxClip = intensity * 10;
const top = Math.floor(Math.random() * maxClip);
const bottom = Math.floor(Math.random() * maxClip);
keyframes += ` ${percent}% { clip-path: inset(${top}% 0 ${bottom}% 0); }\n`;
}
keyframes += '}';
return keyframes;
}
// Usage
const result = generateColorSplitGlitch({
text: 'GLITCH',
fontSize: 80,
textColor: '#ffffff',
bgColor: '#0a0a0a',
color1: '#00ffff',
color2: '#ff00ff',
duration: 2,
});
console.log(result.html);
console.log(result.css);