Свойство text-shadow
Задает тень для текста
text-shadow: 1px 2px 3px #000;
- поддерживается начиная с
- частичная поддержка до
- не поддерживается
Значения
text-shadow: none;
Убирает тень у текста
text-shadow: 1px 2px;
Задает тень текста используя два параметра. Первый - сдвиг по оси X, второй - сдвиг по оси Y. Цвет тени будет равен цвету текста. Сдвиг по осям может быть как положительным, так и отрицательным числом. Возможные единицы: px, em, rem, vh, vw
<style>
.example-1 {
text-shadow: 1px 2px;
}
</style>
<p class="example-1">Текст с тенью</p>
Текст с тенью
text-shadow: 1px 2px #000;
Задает тень текста используя три параметра. Первый - сдвиг по оси X, второй - сдвиг по оси Y, третий - цвет тени. Для определения цвета можно использовать ключевые слова названия цвета, шестнадцатеричные значения: #ccc, RGB: rgb(0, 0, 0), RGBa: rgba(0, 0, 0, 0.9) и currentColor.
<style>
.example-2 {
color: #fff;
text-shadow: 1px 2px #000;
}
</style>
<p class="example-2">Текст с тенью</p>
Текст с тенью
text-shadow: 1px 2px 3px #000;
Задает тень текста используя четыре параметра. Первый - сдвиг по оси X, второй - сдвиг по оси Y, третий - размытие тени, четвертый - цвет тени
<style>
.example-3 {
color: #fff;
text-shadow: 1px 2px 3px #000;
}
</style>
<p class="example-3">Текст с тенью</p>
Текст с тенью
text-shadow: 1px 2px 2px #000, 1px 2px 2px red;
Задает множество теней для текста, используя запятую. Возможно задавать сколько угодно теней.
<style>
.example-3 {
color: #fff;
text-shadow: 1px 2px 2px #000, 1px 2px 2px red;
}
</style>
<p class="example-3">Текст с тенью</p>
Текст с тенью