Как добавить тень к тексту?

Тень к тексту добавляется с помощью стилевого свойства text-shadow. С помощью его параметров можно установить положение тени, степень её размытия и цвет тени (рис. 1).

Параметры свойства text-shadow

Рис. 1. Параметры свойства text-shadow

Обязательных параметров у text-shadow два:

  • смещение тени по горизонтали, значение может быть положительным (тень будет справа от текста) или отрицательным (тень будет слева от текста);
  • смещение тени по вертикали, значение может быть положительным (тень будет ниже текста) или отрицательным (тень будет выше текста).

Остальные два необязательных параметра указывают размытие тени и её цвет.

Например, чтобы добавить тень к заголовку, можете использовать следующий код:

h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

В данном примере тень будет смещена на 2 пикселя вправо и вниз от текста, размытие тени составит 4 пикселя, а цвет тени будет полупрозрачным чёрным (rgba(0, 0, 0, 0.5)).

В примере 1 тень к заголовку добавляется без размытия, чтобы она имела чёткие края.

Пример 1. Использование text-shadow

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Тень</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet"> <style> h1 { font-family: Lobster, sans-serif; /* Шрифт */ font-size: 3rem; /* Размер заголовока */ color: #e0d0a4; /* Цвет */ } h1.shadow { text-shadow: 2px 2px 0 rgba(0,0,0,0.8); /* Параметры тени */ } </style> </head> <body> <h1>Заголовок без тени</h1> <h1 class="shadow">Заголовок с тенью</h1> </body> </html>