CSS text-shadowの使い方 — ネオン・グロー・長い影などのエフェクト
CSS text-shadowはテキストに影を付けるプロパティで、複数の影を重ねることでネオンサイン・グロー・立体的な長い影など多彩な表現が可能です。JavaScriptを使わず純粋なCSSで実装できる表現力の高いエフェクトです。
text-shadowの基本構文
text-shadow: X軸オフセット Y軸オフセット ぼかし半径 色 で指定します。text-shadow: 2px 2px 4px rgba(0,0,0,0.5) は右下方向に4pxのぼかしで半透明の黒い影が付きます。複数の影はカンマで区切って重ねられます。text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #0ff のように書くとネオングロー効果になります。
ネオン・グローエフェクトの作り方
ネオン効果はオフセットなし（0 0）のぼかしを複数重ねることで作ります。ぼかし半径を段階的に大きくし（5px・10px・20px・40px）、色には明るい蛍光色（シアン・マゼンタ・ライムなど）を使います。暗い背景色と組み合わせるとネオンサインらしい発光感が出ます。グローの強さはアルファ値やレイヤー数で調整します。
長い影（Long Shadow）効果
Long Shadow（長い影）は複数のtext-shadowを斜め方向に少しずつずらして重ねることで、45度方向に伸びる長い影を作ります。CSSのみで実現しますが、影の数が多いほどファイルサイズが増えます。CSS Text Shadow Generatorでは最大5レイヤーの影を設定でき、Long Shadow専用プリセットから手軽に試せます。
印刷・レタリングへの応用
text-shadowはWebだけでなくSVGでも利用できます。font-weight: boldな太いフォントにtext-shadow: 1px 1px 0 #000のような細い影を付けるとエングレービング風の高級感が出ます。多色の影を重ねた3Dレタリング効果も可能です。CSS Text Shadow Generatorでプリセットを選びながら自分のフォント・色でカスタマイズできます。