Инструмент

Генератор теней

Тени блока и текста в несколько слоёв: сдвиг, размытие, растяжение, цвет с прозрачностью и внутренняя тень. Предпросмотр на светлом, тёмном и цветном фоне.

Внимание

Инструменту нужен JavaScript. Без него работают учебник и справочник.

Свойство

box-shadow text-shadow

Фон предпросмотра

светлый тёмный цветной

Слой 1
Сдвиг по X 0px
Сдвиг по Y 1px
Размытие 2px
Растяжение 0px
Непрозрачность 20%

Цвет inset
Слой 2
Сдвиг по X 0px
Сдвиг по Y 12px
Размытие 32px
Растяжение -8px
Непрозрачность 25%

Цвет inset

Код

box-shadow:
  0 1px 2px rgb(0 0 0 / 20%),
  0 12px 32px -8px rgb(0 0 0 / 25%);

box-shadow рисует тень по форме блока, с учётом скругления углов. Числа по порядку — сдвиг по горизонтали и вертикали, размытие и растяжение. Слоёв — 2: они перечислены через запятую, первый рисуется поверх остальных. Маленькая резкая тень вместе с большой мягкой выглядит естественнее одной. Отрицательное растяжение сжимает тень, и она не выглядывает по бокам — только снизу. Тень не занимает места в раскладке и не сдвигает соседей.

По теме