CSS-тень
Даёт правило box-shadow под нужную глубину — от лёгкой подложки до свечения.
Что делает
Выдаёт готовое правило box-shadow под нужную глубину тени. Вы выбираете характер тени из списка, а инструмент собирает строку со смещением, размытием и прозрачностью — подбирать числа вручную не приходится. Считается всё в браузере, ничего никуда не отправляется.
Когда пригодится
Карточка на странице выглядит плоско, нужна аккуратная подложка под ней. Кнопка должна казаться нажатой — тень внутрь, а не наружу. Всплывающее окно или меню, которому нужно оторваться от страницы. Акцентный элемент, вокруг которого просится свечение вместо обычной тени.
Как заполнить
Тип тени Пять готовых вариантов. Мягкая — еле заметная подложка, чтобы блок не сливался с фоном. Средняя — привычная тень карточки. Глубокая — сильный отрыв от страницы, для окон и выпадающих панелей. Внутренняя — тень уходит внутрь элемента, поле или кнопка выглядит вдавленной. Свечение — мягкий ореол по контуру, для акцентов и состояния фокуса. Определиться проще на глаз: переключайте варианты и смотрите на образец рядом.
Что получится
Строка CSS, готовая к вставке в стили как есть. Скопируйте её в своё правило — подставлять единицы и подбирать цвет тени не нужно, они уже в значении. Если оттенок тени должен попадать в фирменные цвета, поменяйте в скопированной строке значение цвета, остальные числа трогать не обязательно.
