Генератор CSS Box Shadow
Создавайте многослойные CSS-тени с живым предпросмотром
Генератор CSS Box Shadow полностью работает в вашем браузере. Созданные вами слои тени и сгенерированный CSS никогда не покидают ваше устройство, и ничего не загружается в ArrayKit.
Открыть Генератор CSS Grid
Об инструменте Генератор CSS Box Shadow
Генератор CSS Box Shadow формирует CSS-декларацию box-shadow, позволяя накладывать любое количество слоёв тени, каждый со своим смещением, размытием, растяжением, цветом и переключателем inset. Живой предпросмотр обновляется мгновенно по мере изменения значений, так что вы точно видите, как выглядит тень, прежде чем скопировать код. Наложите мягкую окружающую тень под плотную контактную тень для реалистичной глубины или объедините слой inset и внешний слой для эффекта нажатой кнопки. Он создан для фронтенд-разработчиков, дизайнеров и всех, кто оформляет карточки, кнопки или модальные окна и хочет точное значение box-shadow, не подбирая пиксельные смещения вручную в таблице стилей. Всё выполняется локально в браузере — никакие данные CSS или дизайна никуда не загружаются.
Возможности
- Накладывайте неограниченное число слоёв тени, каждый с независимыми x, y, размытием, растяжением и цветом
- Переключайте любой слой между отбрасываемой тенью и тенью inset
- Живой предпросмотр показывает совокупный эффект всех слоёв по мере редактирования
- Палитра цветов плюс текстовое поле для прямого ввода значений hex, rgb или rgba
- Готовая к копированию CSS-декларация box-shadow: ...; генерируется мгновенно
- Добавляйте или удаляйте слои, чтобы создавать простые мягкие тени или сложную многослойную глубину
- Отрицательные значения растяжения и смещения поддерживаются для утопленных теней
- Полностью работает в вашем браузере, не отправляя данные тени или дизайна никуда
Как использовать Генератор CSS Box Shadow
- Настройте x, y, размытие и растяжение первого слоя тени
- Выберите цвет и включите Inset, если хотите, чтобы тень располагалась внутри элемента
- Нажмите «Добавить слой», чтобы наложить ещё одну тень для дополнительной глубины
- Скопируйте сгенерированный CSS box-shadow из панели кода
Пример
Ввод
x0 y4 blur8 rgba(0,0,0,.2)
Результат
box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);
Мягкая отбрасываемая тень, отрендеренная как готовая к вставке CSS-декларация.
Частые ошибки и устранение неполадок
- box-shadow выглядит слишком резко или коробчато вместо мягкого вида. — Увеличьте значение размытия относительно смещения — большее размытие с умеренным смещением по y даёт более мягкую и естественную тень.
- Слой inset не виден в окне предпросмотра. — Тени inset появляются только внутри области отступов элемента, поэтому убедитесь, что смещение и размытие слоя достаточно велики, чтобы быть заметными на фоне предпросмотра.
- Несколько слоёв делают значение тени трудным для чтения в таблице стилей. — Это нормально — box-shadow принимает слои, разделённые запятыми, и Генератор CSS Box Shadow по замыслу держит каждый слой на одной строке; отформатируйте линтером, если хотите по одному слою на строку.
- Отрицательное значение растяжения, кажется, сводит тень почти на нет. — Отрицательное растяжение стягивает края тени внутрь перед применением размытия, поэтому сочетайте его с большим размытием, чтобы тень оставалась видимой — это часто встречается у плотных контактных теней.
Часто задаваемые вопросы
- Что создаёт Генератор CSS Box Shadow?
- Он создаёт полную CSS-декларацию box-shadow из одного или нескольких настроенных вами слоёв, каждый со своим смещением, размытием, растяжением, цветом и настройкой inset, готовую для вставки в таблицу стилей.
- Может ли Генератор CSS Box Shadow создавать несколько наложенных теней?
- Да. Нажмите «Добавить слой», чтобы наложить столько слоёв тени, сколько нужно — box-shadow в CSS поддерживает слои через запятую, и инструмент объединяет их в правильном порядке.
- Что такое inset box-shadow?
- Тень inset отрисовывается внутри рамки элемента, а не позади неё, что полезно для эффекта нажатой кнопки или тонких внутренних границ. Включите Inset на любом слое, чтобы переключить его.
- Поддерживает ли Генератор CSS Box Shadow цвета rgba и hex?
- Да. Введите любой допустимый CSS-цвет — hex, rgb() или rgba() — в поле цвета слоя, либо используйте палитру для hex-значений; rgba позволяет отдельно управлять прозрачностью тени.
- Загружает ли Генератор CSS Box Shadow мои значения дизайна?
- Нет. Все слои тени и сгенерированный CSS остаются в вашем браузере. Никакие данные вашего дизайна не загружаются в ArrayKit или на какой-либо сервер.
- Как получить мягкую, реалистичную тень вместо жёсткого края?
- Используйте большее значение размытия относительно смещения и рассмотрите вариант наложения маленькой плотной тени на более крупную мягкую — такой двухслойный подход имитирует то, как тени выглядят при реальном освещении.
Связанные инструменты
Все инструменты ArrayKit