壊れることで、かえって記憶に残る。テキストグリッチ系のボタンには、そういう逆説的な魅力があります。シアンとマゼンタが左右にズレ、横帯が高速で切り替わり、ネオンの光が崩壊する。「正常に見えないもの」が視線を引き寄せ、「何か起きている」という感覚を生み出します。サイバーパンク、テック系SaaS、ゲームUI、セキュリティサービスのLPなど、「デジタルの世界にいる」という文脈を持つサイトにとって、このグリッチエフェクトは主張のある武器になります。
この記事で紹介する5本はすべて、content: attr(data-text)でテキストの複製を作り、clip-path・translate・skewX()・steps()を組み合わせてズレさせる手法です。ボタン全体を崩壊させるグリッチとは違い、テキスト部分のみが破壊される演出が特徴で、よりシャープでコントロールされたグリッチ感になります。HTMLのdata-text属性にボタンと同じテキストを入れる必要がある点だけ、コピペ時に注意してください。JavaScript不使用、WordPress/SWELLでもそのまま動きます。
RGB Shift（RGBシフト）
ホバーした瞬間、シアンとマゼンタのテキストコピーが左右にズレながら、clip-path: inset()で切り抜かれた横帯が高速で切り替わるパターンです。元のテキストは白色のまま残り、その上にシアン層・マゼンタ層が重なることで、スクリーンの画素がズレたような3色分離の演出になります。steps(4)のステップアニメーションが、スムーズな動きではなく「デジタルな跳び方」を作り出します。
clip-path: inset()の上下の数値が、どの横帯を切り取るかを決めています。例えばinset(5% 0 80%)は上から5%・下から80%を切り抜くので、上端の細い帯だけが表示されます。シアンとマゼンタでそれぞれ別の帯を表示することで、テキストが複数の横断面に分解されたような見た目になります。定番のサイバーパンク系グリッチで、テック系サイトのCTAボタンや、ヒーローセクションのナビゲーションに最も使いやすいデザインです。
See the Pen RGB Shift by BaseKENT (@basekent) on CodePen.
調整方法
- ズレ幅:
calc(-50% - 4px)の4pxを大きくするとよりダイナミックにズレます。8pxでかなり派手、2pxでさりげないズレになります - 速度:
0.35sを0.2sにするとより荒々しいグリッチ、0.5sにするとゆっくり崩壊する演出になります - シアン・マゼンタを変更:
#00ffffを#00ff88（グリーン系）、#ff00ffを#ff4400（レッド系）に変えるとヴィンテージCRT風になります
Razor Slice（レイザー・スライス）
速度が速く、バチバチと高速で帯が切り替わるパターンです。0.12s steps(3)という非常に短いアニメーションが、テキストを細いスライスで切り刻んでいくような視覚効果を作ります。RGB Shiftがゆったり崩壊するのに対して、Razor Sliceはまさに「刃が走る」ような鋭さが特徴です。シアンとレッドの組み合わせが、ダークな背景に対して強いコントラストを生みます。
ベースのテキストは白色のままで、シアンとレッドのコピーが異なる横帯を表示しながら、わずかに異なるタイミングで動きます（0.04sのディレイ差）。この小さなタイミングのズレが、「2つの信号が干渉している」ようなリズムを作ります。ゲーム系ランディングページのCTAや、ハッカー・セキュリティ系コンテンツのアクセントボタンとして機能します。
See the Pen Razor Slice by BaseKENT (@basekent) on CodePen.
調整方法
- 速度:
0.12sを0.08sにするとさらに高速で「電子ノイズ」感が出ます。0.2sにすると視認できる速さになります - ズレ幅:
6pxを大きくするほど帯が横に大きくはみ出します。10px以上にするとかなり荒れた印象になります - スライスの帯の厚さ:
clip-path: inset(0 0 88% 0)の88%を75%に変えると上端の帯が厚くなります
CRT Flicker（CRTフリッカー）
ブラウン管モニター（CRT）の映像が乱れるような、細かいちらつきと位置ジッターのパターンです。RGBの派手な色ズレではなく、同系色（明るい緑と暗い緑）が ±1〜2px の小刻みなジッターで揺れ、ボタン全体も 0.2s で微妙に透明度が変化します。「何かが壊れかかっている」のに「まだ動いている」という緊張感のある演出です。
グリーン系の配色とモノスペースフォント（Courier New）の組み合わせが、ターミナルやハッキングシーンの画面を連想させます。CRTの走査線のように上半分と下半分が別のタイミングでちらつくよう、::beforeはclip-path: inset(0 0 50% 0)（上半分）とclip-path: inset(50% 0 0 0)（下半分）を交互に切り替えています。派手なグリッチではなく「機械が静かに壊れていく」演出を求めるときに最適です。セキュリティ系、AI系、サイエンスフィクション系のサイトに合います。
See the Pen CRT Flicker by BaseKENT (@basekent) on CodePen.
調整方法
- 色の変更:
#4ade80（グリーン）を#38bdf8（シアンブルー）に変えると宇宙・AI系の雰囲気になります - ちらつき速度:
0.08sを0.05sにするとノイズが増え、0.15sにするとゆっくりした不安定さになります - ジッター幅:
±1px（translate(calc(-50% + 1px)）を±3pxに広げると、より激しい位置のブレになります
Neon Corrupt（ネオン・コラプト）
常時ネオングローが光り、ホバーした瞬間にシアンとマゼンタのグロー光が崩壊するパターンです。通常状態ではパープル系のネオンが美しく光り、ホバーで「光自体がRGB分離して壊れる」演出になります。::beforeと::afterはcolor: transparentですが、text-shadowにシアン・マゼンタのグローを設定することで、文字の形に沿った光のみが分離して崩壊します。
ポイントは、::beforeと::afterがcolor: transparent（テキスト色なし）でtext-shadowだけを持っているという点。文字色を持たないため、グロー光のみが浮かび上がります。これにより、「光だけが崩壊する」という幻想的な演出になります。ボーダーもanimation: neonBorderで同期してシアン・マゼンタに切り替わるため、テキストとボーダーが一体でグリッチします。ポートフォリオのCTAや、ミュージシャン・クリエイターのサイトに特に合うデザインです。
See the Pen Neon Corrupt by BaseKENT (@basekent) on CodePen.
調整方法
- ベースのネオン色:
#c026d3（パープル）を#0891b2（シアン系）に変えると青系ネオン、#16a34a（グリーン）に変えるとマトリックス系になります - グロー強度:
text-shadowの20pxの数値を大きくするほど、光の広がりが強くなります - グリッチ速度:
0.3sを変えます。0.2sでより激しい崩壊、0.4sでゆっくりした腐食感になります
Data Corrupt（データ・コラプト）
skewX()によるテキストの斜め歪みと、clip-pathの横帯切り取りを組み合わせたパターンです。他の4本がテキストを「横にズレる」表現だとすれば、Data Corruptは「斜めに歪んで崩れる」表現です。skewX(-8deg)とskewX(5deg)がステップアニメーションで交互に切り替わり、テキストが斜めにつぶれたり引き延ばされたりします。データそのものが文字として存在できなくなっていくような表現です。
オレンジ系の配色は、エラーログや警告メッセージを連想させます。ブランド色がオレンジ系でテック系・インフラ系のコンテンツを扱うサイトなら、警告・注意・重要なアクションのボタンとして使えます。steps(2)という最もシンプルなステップ数にすることで、「0と1の間」を往復する二値的な不安定さを表現しています。
See the Pen Data Corrupt by BaseKENT (@basekent) on CodePen.
調整方法
- 歪みの強さ:
skewX(-8deg)の角度を大きくするほど激しく歪みます。-15degにするとかなり崩れた印象になります - ズレ幅:
calc(-50% - 4px)の4pxを大きくすると、歪みに加えて横ズレも強まります - カラーの変更:
#fdba74（オレンジ）を#f87171（レッド）に変えると、エラー・危険系の雰囲気になります
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
