Этот генератор CSS box-shadow бесплатный?

Да, полностью бесплатный. Нет аккаунта, нет пробного периода, нет скрытых платежей — просто откройте страницу и начните генерировать тени.

Работает ли он без подключения к интернету?

Да. Инструмент работает полностью в вашем браузере без вызовов сервера. После загрузки страницы вы можете отключиться от интернета, и он будет работать идеально.

Мои данные о дизайне приватны? Загружается ли что-либо?

Ничего не загружается. Все настройки теней обрабатываются локально в вашем браузере и сохраняются только в вашем браузере localStorage. Никакие данные никогда не покидают ваше устройство.

Можно ли наложить несколько теней в одном CSS-правиле?

Да. Нажмите '+ Добавить тень' столько раз, сколько нужно. Инструмент объединяет все слои в одно значение box-shadow, разделенное запятыми — идеально для неуморщенных стилей, эффектов свечения или глубины в нескольких направлениях.

Как создать внутреннюю (внутреннюю) тень?

Включите флажок 'Inset' для любого слоя тени. Внутренняя тень отображается внутри границ элемента, что полезно для состояния нажатой кнопки или эффекта внутреннего свечения. Сгенерированный CSS автоматически включает ключевое слово 'inset'.

Загружает ли этот инструмент мои данные?

Нет. Всё выполняется прямо в вашем браузере, поэтому ваши данные никогда не покидают устройство — после загрузки страницы он работает даже офлайн.

🔲 Генератор CSS Box-Shadow

Получите код CSS box-shadow за секунды — без установки, без аккаунта, без интернета. Перетаскивайте ползунки, чтобы задать смещение, размытие, расширение, цвет и прозрачность каждой тени, смотрите, как мгновенно обновляется предварительный просмотр, а затем скопируйте готовый CSS для вставки.

Предварительный просмотр

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

Об инструменте

Этот инструмент работает полностью в вашем браузере с использованием обычного JavaScript — ваши дизайны никогда не покидают ваше устройство. Вы можете наложить несколько слоев теней, чтобы создать эффект глубины, неуморщенные стили, эффекты свечения или небольшое поднятие карточек. Каждый слой поддерживает внутренние тени для эффекта внутреннего свечения или нажатой кнопки. Выходные данные — это стандартный CSS, который можно сразу вставить в любой стиль, фреймворк или токен дизайна.

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

Нажмите '+ Добавить тень', чтобы создать первый слой тени.
Используйте ползунки Offset X, Offset Y, Blur, Spread и Opacity, чтобы настроить каждую тень. Включите 'Inset', чтобы создать эффект внутренней тени.
Нажмите на цветовую палитру, чтобы выбрать любой цвет тени. Предварительный просмотр обновляется в реальном времени при каждом изменении.
Добавьте больше слоев для сложных эффектов с несколькими тенями, например, неуморщенные стили или стекающиеся свечения.
Нажмите 'Скопировать CSS', чтобы получить полное объявление box-shadow и вставить его в ваш стиль.

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

Этот генератор CSS box-shadow бесплатный?: Да, полностью бесплатный. Нет аккаунта, нет пробного периода, нет скрытых платежей — просто откройте страницу и начните генерировать тени.
Работает ли он без подключения к интернету?: Да. Инструмент работает полностью в вашем браузере без вызовов сервера. После загрузки страницы вы можете отключиться от интернета, и он будет работать идеально.
Мои данные о дизайне приватны? Загружается ли что-либо?: Ничего не загружается. Все настройки теней обрабатываются локально в вашем браузере и сохраняются только в вашем браузере localStorage. Никакие данные никогда не покидают ваше устройство.
Можно ли наложить несколько теней в одном CSS-правиле?: Да. Нажмите '+ Добавить тень' столько раз, сколько нужно. Инструмент объединяет все слои в одно значение box-shadow, разделенное запятыми — идеально для неуморщенных стилей, эффектов свечения или глубины в нескольких направлениях.
Как создать внутреннюю (внутреннюю) тень?: Включите флажок 'Inset' для любого слоя тени. Внутренняя тень отображается внутри границ элемента, что полезно для состояния нажатой кнопки или эффекта внутреннего свечения. Сгенерированный CSS автоматически включает ключевое слово 'inset'.
Загружает ли этот инструмент мои данные?: Нет. Всё выполняется прямо в вашем браузере, поэтому ваши данные никогда не покидают устройство — после загрузки страницы он работает даже офлайн.