CSSテキストシャドウとボックスシャドウ効果(例付き)

CSS3を使用するtext-shadowと、box-shadow(テキストに影を追加する)と(他の要素に影を追加する)の2種類の影を作成できます。

CSS3テキストシャドウ

text-shadowプロパティには、4個までの値をとることができます。

  • 水平方向の影
  • 垂直の影
  • ぼかし効果
例:

通常のテキストシャドウ

h1 { text-shadow: 2px 2px 5px crimson; }
通常のテキストシャドウの例

輝くテキスト効果

h1 { text-shadow: 0 0 4px #00FF9C; }
輝くテキストの例

複数の影

これを実現するには、2つ(またはそれ以上)の値のセットの間にコンマを追加するだけです。

h1 { color: white; text-shadow: 0 0 3px #F10D58, 0 0 7px #4578D5; }
白いテキストの複数の影の例

CSS3ボックスシャドウ

box-shadowプロパティには、6つの値を取ることができます。

  • (オプション)insetキーワード(影をフレーム内の影に変更します)
  • 水平方向の影
  • 垂直の影
  • ぼかし効果
  • 広がり
例:
.first-div { box-shadow: 1px 1px 5px 3px grey; } .second-div { box-shadow: 0 0 5px 1px lightgrey; } .third-div { box-shadow: inset 0 0 15px 5px rgba(0,0,0,0.75); }
ボックスシャドウの例

詳しくは:

  • MDNWebドキュメント
  • ブラウザのサポートを確認する
  • CSSボックスシャドウジェネレーター(ボックスシャドウを自由に試してみてください)