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

Самая частая беда с тенями всплывает через месяц, когда на сайт добавляют тёмную тему: чёрная тень на тёмном фоне невидима, и карточки «пропадают» вместе с глубиной. Чёрному на чёрном темнеть некуда.

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

У настоящей тени край резкий рядом с предметом и размытый вдали. Одним слоем box-shadow такое не изобразить, поэтому мягкие тени крупных сайтов собраны из четырёх-шести слоёв с нарастающим смещением и размытием. Здесь такая стопка собирается одним движением: задаёте высоту подъёма и число слоёв, кривую роста инструмент строит сам. Дальше каждый слой можно править отдельно — всего их до восьми, включая внутренние.

Типичная ошибка — сплошной чёрный без прозрачности: выглядит грязью, а не тенью. Настоящие тени полупрозрачны, обычная плотность — от 5 до 25 %. Замечание об этом появляется само, как и подсказка о слое с нулевым размытием: такой слой работает рамкой, и иногда это ровно то, что нужно.

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

Шесть готовых теней: карточка, приподнятая, выпадающее меню, вдавленное поле, неоморфизм и неон. Предмету можно сменить цвет и скругление, чтобы смотреть тень на том, что будет на сайте. Код забирается в CSS, переменной SCSS или классом Tailwind.

Что дальше

Фон под карточку удобно собрать генератором градиентов, сетку страницы — конструктором сеток, а цвет тени снять с макета палитрой из изображения.