CSS テキストシャドウ生成器 — テキストに影を設定

CSSのtext-shadowはテキストに影を付けます——深みの追加・複雑な背景での可読性向上・装飾効果のため。生成器で視覚的に設定して即座にコードを取得できます。

text-shadowの構文

text-shadow: 水平オフセット 垂直オフセット ぼかし 色。カンマで区切って複数の影を設定できます。text-shadow: 2px 2px 4px rgba(0,0,0,0.3)は微妙なドロップシャドウ。text-shadow: 0 0 20px #fffはグロー効果です。

人気のエフェクト

複雑な背景上での可読性向上のためのドロップシャドウ。増加するオフセットを持つ複数のシャドウで3D押し出しを模倣するロングシャドウ。オフセットなし・大きなぼかし・明るい色でグロー効果。オフセットありぼかしなしの硬いシャドウでレトロな印刷効果。

可読性の考慮

テキストシャドウは画像やグラデーション上のテキストの可読性を高めます。しかし過剰なシャドウはかえって可読性を下げます。低い不透明度・小さなオフセットの微妙なシャドウが派手な効果よりプロらしく見えます。