Генератор box-shadow

Как пользоваться

1. Быстрый путь: возьмите готовую тень из плиток сверху. Tailwind и Material — те самые значения, что стоят в фреймворках; «карточка», «парящая», «неоморфизм», «неон» и «утопленное поле» — приёмы, которые чаще всего и ищут.

2. Свой вариант удобнее начинать с мягкой тени: угол света решает, куда падает, расстояние — как далеко, число слоёв — насколько плавный край. Кривые управляют тем, как быстро растут размытие и как быстро гаснет альфа.

3. Дальше правьте слои руками. У каждого ползунка есть числовое поле: мышью подбирают, с клавиатуры ставят точное значение. Слой можно поднять, опустить, продублировать и временно выключить, не удаляя.

4. Подгоните сцену под свой макет: вставьте в «цвет фона» тот фон, на котором тень будет жить. На тёмном фоне чёрная тень не видна вовсе — там работает либо свечение цветом, либо очень плотная тень.

5. Кнопка «Взять из фона» у каждого слоя красит тень в оттенок фона и притемняет его. Чистый чёрный поверх цветного фона даёт серое пятно — это самая частая причина «грязной» тени.

6. Переключатель свойства собирает те же слои в text-shadow или в filter: drop-shadow. Растяжение и inset туда не переносятся — этих параметров у обоих свойств нет, и панель об этом пишет.

7. Готовое забирайте в нужном виде: CSS, Tailwind вида shadow-[…], SCSS-переменная или значения для панели Effects в Figma. Кнопка «Скачать файлом» отдаёт то же самое файлом, «Ссылка на набор» — адресом, по которому набор откроется у коллеги.

Формула и что в неё входит

• X — сдвиг по горизонтали; плюс — вправо, минус — влево
• Y — сдвиг по вертикали; плюс — вниз, минус — вверх
• Размытие — ширина растушёвки края; ноль даёт тень с резкой границей
• Растяжение — на сколько тень больше самого блока до размытия; может быть отрицательным
• Цвет — любой формат: hex, rgb(), rgba(), hsl(); прозрачность выводится отдельным ползунком
• inset — необязательное слово в начале слоя; переносит тень внутрь блока

Разбор примера: тень карточки из двух слоёв

Исходные данные — те же, что стоят в полях по умолчанию: их можно пересчитать в уме и убедиться, что инструмент не врёт.

• Слой 1: X 0, Y 1, размытие 2, растяжение 0, цвет #0F172A, прозрачность 6 %
• Слой 2: X 0, Y 8, размытие 24, растяжение 0, цвет #0F172A, прозрачность 12 %

1. Цвет взят не чистым чёрным, а тёмно-синим #0F172A: у него есть оттенок, и на светло-сером фоне тень читается как тень, а не как серая наклейка.

2. #0F172A — это R 15, G 23, B 42. Прозрачность 6 % — альфа 6 ÷ 100 = 0,06, вместе выходит rgba(15, 23, 42, 0.06).

3. Нулевые значения пишутся без единиц: 0, а не 0px. Растяжение 0 в строку не попадает вовсе.

4. Первый слой: 0 1px 2px rgba(15, 23, 42, 0.06). Второй: 0 8px 24px rgba(15, 23, 42, 0.12).

5. Слои разделяются запятой. Два слоя панель печатает в три строки: сначала «box-shadow:», потом каждый слой с новой строки и отступом. Один слой остаётся в одной строке. Ниже те же два слоя собраны подряд — для браузера это одно и то же, переносы нужны только глазам.

6. Тот же набор во вкладке hex выглядит как 0 1px 2px #0f172a0f: 0,06 × 255 ≈ 15, а 15 в шестнадцатеричной — 0f.

box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.12);

Частые вопросы

• Почему тень выходит грязной, а не мягкой?

  Обычно из-за одного слоя с большой прозрачностью и чистого чёрного цвета. Разложите тень на два-три слоя с прозрачностью 6—15 % каждый: ближний короткий и резкий, дальний длинный и размытый — это и делает режим мягкой тени. Чёрный при этом стоит заменить на тёмный оттенок фона: кнопка «Взять из фона» у каждого слоя берёт цвет сцены и притемняет его, и тень перестаёт выглядеть серой наклейкой.

• Чем растяжение отличается от размытия?

  Растяжение увеличивает саму фигуру тени до того, как её размоют: тень становится больше блока по всем сторонам. Размытие только растушёвывает край. Отрицательное растяжение сжимает фигуру и часто нужно, чтобы длинная тень не выползала по бокам — именно на нём построены тени Tailwind, начиная с md.

• Что делает inset?

  Переносит тень внутрь блока. Наружу такая тень не выходит совсем: она рисуется от внутреннего края к центру. Используется для утопленных полей ввода и нажатого состояния кнопок. Наружные и внутренние слои можно смешивать в одном свойстве, а вот в text-shadow и drop-shadow inset не существует — при переключении свойства такие слои панель отбрасывает и пишет об этом.

• Чем drop-shadow отличается от box-shadow?

  box-shadow всегда рисует тень по прямоугольнику блока (с учётом скругления). filter: drop-shadow идёт по фактической форме содержимого: по контуру PNG с прозрачностью, по SVG-иконке, по фигуре, вырезанной clip-path. Растяжения и inset у него нет, зато он единственный даёт тень непрямоугольному предмету. Несколько теней у filter перечисляются через пробел, а не через запятую.

• Как перенести тень в Figma?

  Переключите формат вывода на «Figma»: панель разложит каждый слой в те четыре поля, которые есть в Effects — X, Y, Blur, Spread, — и отдельно цвет с процентом непрозрачности. Тип эффекта тоже подписан: Drop shadow для обычного слоя, Inner shadow для inset. Порядок сверху вниз в Figma тот же, что в CSS-строке.

• Сколько слоёв имеет смысл делать?

  Панель разрешает восемь, но на глаз разница обычно заканчивается на пяти-шести. Каждый слой — это ещё один проход отрисовки, и на длинных списках с тенью у карточек это заметно. Практическое правило: два-три слоя для карточек и кнопок, пять-шесть — для крупного парящего элемента вроде модального окна.

• Влияет ли box-shadow на раскладку?

  Нет. Тень не занимает места в потоке и не двигает соседей — в отличие от border и outline с положительным offset. Поэтому её можно менять на ховере, не вызывая пересчёта раскладки. Анимировать саму тень всё же дорого: дешевле держать под элементом второй слой с готовой тенью и менять ему opacity.

• Почему в строке rgba, а не hex с альфой?

  Потому что rgba читается глазами: видно, что альфа 0,06, а не «десять шестнадцатеричных». Восьмизначный hex работает во всех современных браузерах, и если он нужен — переключите формат вывода на «CSS · hex», панель пересчитает альфу сама.