こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
水面に反射した文字って、とても幻想的で印象に残りますよね。
湖や海辺に建物の灯りがゆらゆらと揺れて映り込むような風景を見たことがある方も多いと思います。
実はこの“水面リフレクション”の雰囲気を、CSSだけで簡単に再現できるんです。
普段の見出しやタイトルテキストにちょっとした演出を加えるだけで、デザインの印象はガラッと変わります。
特にブランディングサイトやイベント特設ページ、アート系のポートフォリオなどに取り入れると、一気に雰囲気が増し「ただの文字」が「作品」に昇華するのを感じられるでしょう。
私自身も過去に制作したサイトでリフレクション文字を使用したことがあります。
トップページのキャッチコピーに水面反射のエフェクトを加えたところ、訪れた人が「すごい！映像みたい！」とSNSで拡散してくれ、集客効果にもつながった経験があります。
この記事では、CSSで簡単に作れる「水面に映り込むリフレクション文字」の実装方法を、コピペでそのまま使える形でご紹介します。
さらに、応用例として「反射をゆらゆら揺らす」「グラデーションを使う」テクニックも解説しますので、ぜひ最後までご覧ください。
リフレクション文字の基本実装
まずはシンプルに、文字を上下に並べて「映り込み」を表現する方法です。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
::afterで複製した文字を上下反転させ、透明度を調整することで「水面に映り込むような反射」を再現しています。
このように少しゆらぎを与えるだけで、本当に水面に映っているかのような演出が加わります。
応用1：夜景のようにネオンカラーを反射させる
反射部分にグラデーションを加えると、水面に映り込む色彩がより美しく表現できます。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
華やかさが増し、夜景のネオンやイベント感のある雰囲気にもピッタリです。
応用2：マウス動きに応じて揺らす
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
まとめ
CSSで作れる「水面に映り込むリフレクション文字」は、工夫次第でシンプルにも幻想的にも表現できます。
基本の反射だけなら数行で実装可能ですが、アニメーションや色彩を組み合わせることで、印象的なビジュアルへと発展します。
デザインに少しアクセントを加えたいとき、ぜひ取り入れてみてください。
satokotadesignキャンペーン実施中！
