Генератор CSS box-shadow
Создавайте CSS box-shadow с настройкой смещения, размытия, растяжения и цвета, с поддержкой нескольких слоёв и готовых шаблонов.
Генератор CSS box-shadow
Настраивайте горизонтальное и вертикальное смещение, радиус размытия, радиус растяжения и цвет — инструмент создаст соответствующее объявление box-shadow по мере ввода данных. Он разработан как для повседневных случаев (карточка, кнопка, модальное окно, которое должно выступать над страницей), так и для многоуровневых теней, созданных путём наложения нескольких теней — метода, лежащего в основе мягкой, реалистичной глубины, используемой в большинстве современных систем проектирования.
Выпадающее меню «Шаблон» предлагает три готовых варианта: тонкую, среднюю и насыщенную тени с предварительно подобранным количеством слоёв, смещением и размытием; выберите «Пользовательский» для полного управления каждым значением. Опция «Слои» определяет количество наложенных теней: каждый добавленный слой увеличивает смещение и размытие и снижает его прозрачность, превращая одну плоскую тень в мягкую, убедительную. Параметр «Внутренняя» переворачивает тень внутрь для нажатых элементов, «Прозрачность» контролирует интенсивность цвета, а переключатель единиц выводит результат в px или rem. Включите вариант для тёмного режима, чтобы получить вторую, более интенсивную объявление, обёрнутое в блок @media (prefers-color-scheme: dark) — на тёмном фоне тень нуждается в большей прозрачности, чтобы оставаться видимой. Выберите, как выводить результат: в одну строку, как пользовательское свойство --box-shadow или как класс .box-shadow, и добавьте соответствующую строку filter: drop-shadow для элементов, которые недоступны для box-shadow, таких как SVG иконка или прозрачный PNG.
Каждое значение ограничено разумным диапазоном, и неопознанный цвет вернётся к чёрному вместо повреждённого CSS, поэтому результат всегда готов вставить в таблицу стилей.
Все вычисления происходят в вашем браузере при настройке элементов управления — цвет и сгенерированный CSS никогда не отправляются никуда. Скопируйте результат, загрузите его в виде файла .txt или отправьте в другой инструмент для дальнейшей работы.