Возможности text-shadow, эффективные тени

text-shadow - Добавляет тень к тексту, а также устанавливает её параметры: цвет тени, смещение относительно надписи и радиус размытия.

Рассмотрим простейший пример.

p { text-shadow: 1px 2px 3px #000; }

1. Первое значение (1px) — смещение тени по горизонтали. Принимает положительные и отрицательные значения. При положительном значении смещает тень вправо, при отрицательном – влево.
2. Второе значение (2px) — смещение тени по вертикали. Принимает положительные и отрицательные значения. При положительное значении смещает тень вниз, при отрицательном – вверх.
3. Третье значение (3px) — размытие тени. Когда размытие не нужно, параметр можно не указывать. Параметр поддерживается не всеми браузерами.
4. Четвертое значение (#000) — цвет тени. Параметр также можно не указывать, и в этом случае будет использоваться цвет текста.

Выше было упомянуто о нескольких тенях. Да, одному тексту можно указывать несколько теней и делается это следующим образом.

p { text-shadow: 1px 1px, 2px 2px #ccc, 3px 3px 1px #000; }

Иными словами - наборы параметров всех теней последовательно перечисляются через запятую.

И так - примеры:

Слегка доработанный эффект вдавленного текста (за счёт добавления верхней тени выглядит естественнее, чем растиражированные в сети примеры):

.inset {
    font-size: 72px;
    color: #666;
    text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
}

Наоборот, выдавленный текст:

.outset {
    font-size: 72px;
    font-weight: bold;
    color: #666;
    text-shadow: -2px -2px 2px #fff, -2px 0 2px #fff,
        0 -2px 2px #fff, 2px 2px 2px #000,
        0px 2px 2px #000, 2px 0 2px #000;
}
    

Радужная тень:

.rainbow {
    font-size: 72px;
    font-weight: bold;
    color: rgba(0, 0, 0, 0); /* сам текст невидим */
    text-shadow: 3px 0 0 #d91f26, 6px 0 0 #e25b0e,
        9px 0 0 #f5dd08, 12px 0 0 #059444,
        15px 0 0 #0287ce, 18px 0 0 #044d91,
        21px 0 0 #2a1571;
}
        

Текст с обводкой:

.stroke {
    font-size: 72px;
    font-weight: bold;
    color: #999;
    text-shadow: 1px 1px 0 #e47e0f, -1px -1px 0 #e47e0f,
        1px -1px 0 #e47e0f, -1px 1px 0 #e47e0f;
}
            

.neon {
    background: #000;
    font-size: 72px;
    font-weight: bold;
    color: #407ec4;
    text-shadow: 1px 1px 0 #4da2fc, -1px -1px 0 #4da2fc,
        1px -1px 0 #4da2fc, -1px 1px 0 #4da2fc,
        4px 4px 8px #2c5889, -4px 4px 8px #2c5889,
        4px -4px 8px #2c5889, -4px -4px 8px #2c5889;
}