Генератор тени блока CSS (box-shadow)

• Выберите основу в галерее: мягкую тень, свечение, обводку, неоморфизм и другие приёмы. Выбранный пример выделяется рамкой.
• Настройте тень. В режиме «Мягкая тень» один источник раскладывается на несколько слоёв с растущим размытием. В режиме «Отдельные слои» каждый слой настраивается сам по себе, слои можно менять местами, добавлять до 8 и удалять.
• В блоке «Предпросмотр» над образцом можно сменить фон, цвет блока и скругление, чтобы увидеть тень в условиях своего макета. Эти параметры в CSS не попадают. Кнопка развёртывания открывает инструмент на всё окно; выход — кнопкой «Свернуть» или клавишей Esc.
• Скопируйте CSS или ссылку на тень: по ссылке откроются те же настройки. Кнопка «Сбросить» возвращает исходную тень. Всё работает в браузере.

Запись box-shadow: 0 24px 48px 0 rgb(24 34 56 / 0.24) читается по порядку: смещение по горизонтали, смещение по вертикали, размытие, растяжение и цвет. Слово inset в начале переносит тень внутрь блока.

• Смещение задаёт, откуда падает свет: положительное значение по Y опускает тень вниз.
• Размытие делает край мягким, отрицательным оно быть не может.
• Растяжение увеличивает или уменьшает тень. С нулевым размытием и смещением оно рисует обводку, которая не меняет размер блока.
• Через запятую можно перечислить несколько теней: первая рисуется поверх остальных. Так строятся мягкие многослойные тени, неоморфизм и двойные обводки.