HTML側で、影→本体の順に同じ文言を定義する。
┌──────────────────────────────────────┐
│<div id="titleShadow">タイトル</div>                                        │
│<div id="title">タイトル</div>                                              │
└──────────────────────────────────────┘

本体と影を以下のような感じに定義すればOK。
┌──────────────────────────────────────┐
│div#title,                                                                  │
│div#titleShadow {                                                           │
│    position            :absolute;                                          │
│    top                 :2em;                                               │
│    font-size           :4.0em;                                             │
│    text-align          :center;                                            │
│}                                                                           │
├──────────────────────────────────────┤
│div#title {                                                                 │
│    width               :1000px;                                            │
│    color               :#FFFFFF;                                           │
│}                                                                           │
├──────────────────────────────────────┤
│div#titleShadow {                                                           │
│    width               :997px;                                             │
│    padding-top         :3px;                                               │
│    padding-left        :3px;                                               │
│    color               :#000000;                                           │
│}                                                                           │
└──────────────────────────────────────┘
これは、画面サイズが全体で1000pxの例。