カメラレンズが光を完全には1点に集められないとき、色の輪郭がわずかにずれて写る。あの「色収差」をCSSで意図的に再現するのが、このテーマです。text-shadow で赤と青の影をそれぞれ逆方向へほんの数ピクセルずらすだけ。それだけで、テキストがスクリーン越しの映像のように見え始めます。サイバーパンク・VHS・グリッチ文化由来の演出で、ゲーム系・音楽系・ポートフォリオの「ちょっとほかと違う感じを出したい」という場面に刺さります。
全5デモ、JavaScriptなし、CSSのみで実装しています。常時ズレが見えるシンプルな静的版から、ホバーで不規則に崩れるグリッチ版、CRTモニターのスキャンラインと組み合わせたレトロ版、ネオン発光を重ねたサイバーパンク版、呼吸するように脈打つ常時アニメーション版まで、それぞれ違う世界観で構成しています。WordPress / SWELLへのコピペもそのまま使えます。
RGB Split（RGBスプリット）
ホバーしていない状態でも、すでに赤と青がわずかにずれています。text-shadow: -2px 0 rgba(255, 0, 80, 0.85), 2px 0 rgba(0, 200, 255, 0.85) の指定で、テキストの左に赤、右に青の残像が常時出ています。ホバーするとズレ量が -5px・5px まで広がり、映像が乱れるような感覚がさらに強まります。全デモ中で実装が最もシンプルで、色収差というジャンルの入り口として最適な一本です。ダークな背景色との相性が特に良く、ゲーム系・ポートフォリオ・音楽アーティストのサイトに向いています。
See the Pen RGB Split by BaseKENT (@basekent) on CodePen.
調整方法
- ズレ量:
text-shadowの-2px/2pxの数値を大きくするほどズレが強調されます。1pxで繊細な色ずれに、6px以上にすると崩壊感が増します - 色の組み合わせ: 赤(
rgba(255, 0, 80, ...))と青(rgba(0, 200, 255, ...))が基本ですが、緑と紫など補色の組み合わせに変えると別の個性が出ます - ホバー強度:
:hoverのtext-shadowの値だけ変えれば、デフォルトは控えめ・ホバーでドラマチックという段階表現が作れます
Glitch Hover（グリッチ・ホバー）
ホバーした瞬間、テキストの色ずれが不規則に暴れ始めます。@keyframes に steps(1) を組み合わせることで、なめらかに変化するのではなく「カクカクと突然変わる」グリッチ特有の断片的な動きを作っています。赤と青のズレ方が各フレームでランダムに見えるよう、左右どちらへのズレかと距離を変えながら6段階の状態を定義しています。VHSテープが崩れるような、古いモニターの走査線が乱れるような。「壊れているのに格好いい」という矛盾した美しさが、このデモの核です。
See the Pen Glitch Hover by BaseKENT (@basekent) on CodePen.
調整方法
- グリッチ速度:
animation: glitch-split 0.45sの秒数を短くすると激しさが増します。0.2sでカオス感が出て、0.8sではゆっくりした崩壊になります - ズレ量のばらつき:
@keyframes内の各フレームのpx値を変えると、崩れ方のクセを調整できます。-8px/8pxまで広げるとより派手なグリッチに - ステップ数:
steps(1)をsteps(3)に変えると少しなめらかになります。steps(1)が最もカクカクした機械的な印象を作ります
Scan Lines（スキャンライン）
色収差の上に、古いCRTモニターのスキャンラインを重ねたデモです。::after 疑似要素に repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.28) 2px, rgba(0,0,0,0.28) 4px) を設定することで、水平方向に細いストライプが一定ピッチで入ります。色収差だけでも十分サイバーな雰囲気がありますが、スキャンラインが加わると「古いSFゲームのUI」という説得力が生まれます。レトロゲーム系サイト・80年代ネタが絡むコンテンツ・ドット絵風のデザインテーマに特に向いています。
See the Pen Scan Lines by BaseKENT (@basekent) on CodePen.
調整方法
- スキャンライン密度:
repeating-linear-gradientの2pxと4pxの値でストライプのピッチが変わります。4px/8pxにするとスキャンラインが太くなり、よりアナログ感が強まります - ラインの濃さ:
rgba(0, 0, 0, 0.28)の透明度を上げると線が濃くなります。0.5以上にするとかなり暗くなるので、テキストの可読性と合わせて調整してください - 色収差の強さ:
:hoverのtext-shadowで-4px/4pxに設定していますが、スキャンラインとの組み合わせではズレ量を少し大きめにするとバランスが取れます
Neon RGB（ネオン・RGB）
色収差とネオン発光を掛け合わせた、このシリーズで最もサイバーパンク度の高い一本です。text-shadow で赤と青のRGBズレを作りながら、box-shadow でシアン系のネオングロウを重ねています。デフォルト状態でも発光とズレが共存していますが、ホバー時には box-shadow の拡散範囲が広がり、text-shadow のズレ量も増して「画面が焼き付く」ような演出になります。ダーク系LPのフィーチャーボタン、ゲームや音楽フェスのサイト、ポートフォリオの目玉セクションに使うと独特の存在感を放ちます。
See the Pen Neon RGB by BaseKENT (@basekent) on CodePen.
調整方法
- ネオン色:
box-shadowのrgba(0, 200, 255, ...)とborder-colorのシアンをピンク系(rgba(255, 0, 128, ...))や緑系(rgba(0, 255, 128, ...))に変えると、異なるサイバー感が出ます - 発光の拡がり:
:hoverのbox-shadowにある40pxの値を大きくすると光が広範囲に拡散します。背景色が暗いほど発光が映えます - RGBズレとネオンの比率:
text-shadowのズレ量を3px程度に抑えてネオングロウを主役にするか、ズレを6pxにしてグリッチ感を前に出すかで方向性が変わります
Chromatic Pulse（クロマティック・パルス）
ホバーなしで常時動いているデモです。@keyframes でRGBのズレ量が 0 → 3px → 6px → 3px → 0 と呼吸するようにリズミカルに増減し続けます。色収差が生まれて最大に達し、また静寂に戻る──この繰り返しが「生きているような」印象を与えます。ユーザーが何もしていない状態でも視線を引き付けるため、スプラッシュページのメインCTA・ヒーロービジュアルの中心ボタン・カウントダウン系の画面など、「見ている人に気づいてほしい」場面に最適です。アニメーション時間を調整するだけで、穏やかな呼吸にも急き立てるような脈動にもなります。
See the Pen Chromatic Pulse by BaseKENT (@basekent) on CodePen.
調整方法
- アニメーション速度:
animation: chroma-pulse 3sの秒数を変えると呼吸のテンポが変わります。1.5sで急いた感じに、5sでゆったりした呼吸になります - 最大ズレ量:
@keyframes内の50%に設定した-6px/6pxを変えると色収差の最大値が変わります。ページのトーンに合わせて4px〜8pxで調整してください - 開始・終了の余白:
0%, 100%のキーフレームではtext-shadow: 0 0 transparentと完全にズレをゼロにしています。0%の値に少しズレを残しておくと、常時うっすら色収差が見える状態にできます
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
