CSSのtext-shadowが薄い場合の重ね掛け対策と実験

CSSのtext-shadowを使い文字にシャドウを付け、背景との差を出したいときなどにシャドウが薄すぎて困ったことはありませんか？

もしtext-shadowのシャドウが薄い場合には“複数の同じ影を重ね掛け”することで濃くすることができます。

text-shadowの重ね掛けの方法

次のようにカンマ区切りで複数のシャドウを付ける方法で、同じ値にすれば濃くなっていきます。

/*白い影を付ける場合*/

/*シャドウを1つかける*/
h2.shadow1{
   text-shadow: #fff 0 0 10px;
}
/*シャドウを2つかける*/
h2.shadow2{
   text-shadow: #fff 0 0 10px,#fff 0 0 10px;
}

しかし、何回重ねればどのくらいの濃さになるのか、重ねる回数に制限はあるのかなど疑問が出てきます。

重ね掛けの実験、回数・濃さ・順番はどうなるのか

実験サンプルを用意しました。

下のサンプルでは同じ影を1回～10回、30回、
それと記述と表示の順番を確かめるために青い影を最初に書いたものと最後に書いたものを用意しました。

See the Pen text shadow test by YusukeHatanaka (@yusuke_code) on CodePen.

こちらの実験サンプルで判るように、text-shadowの重ね掛けの回数に制限は無さそうです。30回繰り替えしてもその分濃くなっていきます。

しかし、数が多くなるほど表示の差は無くなっていくので、実際には1回～10回程度の中で調整するものだと考えて良いのではないでしょうか。

また、記述と表示の順番はこの実験でも判るように、最初に書いた値が一番上(手前)に表示されます。最後に青を書いた方はもう青が見えないですね。

このtext-shadowの重ね掛けを使えば、背景との差を付け文字を目立たせる表現が簡単にできますね。