Генератор text-shadow

У text-shadow немає розтягнення

Це головна відмінність від box-shadow. Там чотири довжини — зсув X, зсув Y, розмиття і розтягнення. У text-shadow довжин лише три: розтягнення не існує, і четверте число робить усе правило недійсним — браузер мовчки викине його цілком.

Тому «зробити тінь тексту товщою» повзунком не вийде: товщину дають кілька тіней або обведення.

Обведення тексту чотирма тінями

Класичний прийом: чотири тіні з нульовим розмиттям у чотири боки — text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000. Виходить контур.

Сучасніша заміна — -webkit-text-stroke, але вона й досі з префіксом і поводиться інакше на тонких шрифтах: обведення малюється всередину букви, тобто з'їдає її.

Тінь не займає місця

Тінь не впливає на розкладку: сусідні елементи її не помічають і не розсуваються. Через це вона легко вилазить за межі свого контейнера — і overflow: hidden на батькові її обріже.