ToolBox ProБлогEnglish

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

Генерируйте CSS box тени визуально с предпросмотром в реальном времени. Несколько слоёв тени, внутренние тени, управление цветом и прозрачностью, пресеты. Бесплатный онлайн генератор.

Всё работает в вашем браузере — данные не отправляются на сервер.

Зачем использовать генератор CSS Box Shadow?

Создание идеальной CSS box тени может занимать много времени при ручном кодировании. Визуальный генератор позволяет точно настраивать смещение, размытие, растяжение, цвет и прозрачность в реальном времени, мгновенно видя результат. Наш инструмент поддерживает несколько слоёв тени и внутренние тени, что упрощает создание сложных профессиональных теней для ваших веб-проектов.

Ключевые возможности

  • Предпросмотр в реальном времени с настраиваемыми цветами фона
  • Несколько слоёв тени — добавление, удаление и независимая настройка каждого
  • Переключатель внутренней тени (inset) для эффектов внутренней тени
  • 6 пресетов теней: Мягкая, Средняя, Резкая, Многослойная, Мечтательная, Неоновая
  • Копирование CSS-кода и сброс к значениям по умолчанию одним кликом

Как это работает

  1. Выберите пресет или начните с тени по умолчанию
  2. Настройте смещение X/Y, размытие, растяжение, цвет и прозрачность для каждого слоя
  3. Включите режим inset для внутренних теней, добавляйте слои для сложных эффектов
  4. Скопируйте сгенерированный CSS-код в буфер обмена

Технические детали

Этот генератор выводит стандартный синтаксис CSS-свойства box-shadow. Каждый слой следует формату: [inset] offsetX offsetY blurRadius spreadRadius color. Цвета конвертируются из HEX в RGBA для поддержки прозрачности. Несколько слоёв разделяются запятыми согласно спецификации CSS. Инструмент работает на 100% на стороне клиента без внешних зависимостей.

Часто задаваемые вопросы

Можно ли использовать несколько слоёв тени?

Да! Нажмите кнопку 'Добавить слой' для добавления дополнительных слоёв тени. Каждый слой может иметь свои настройки смещения, размытия, растяжения, цвета, прозрачности и inset. Несколько слоёв объединяются в CSS-выводе через запятую.

Что делает внутренняя тень (inset)?

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

Как сбросить тень к значениям по умолчанию?

Нажмите кнопку сброса (иконка круговой стрелки) рядом с кнопкой 'Добавить слой'. Это сбросит все слои тени, цвета фона и настройки к значениям по умолчанию.

Похожие инструменты

Выбор цвета и конвертер

Выбирайте цвета и конвертируйте между форматами HEX, RGB, HSL и HSV

Конвертер HEX в RGB

Конвертируйте HEX-коды цветов в значения RGB и RGBA

Конвертер RGB в HEX

Конвертируйте значения RGB в HEX-коды

Генератор цветовых палитр

Создавайте цветовые палитры из базового цвета — комплементарные, аналоговые, триадные и другие

Проверка контрастности WCAG

Проверяйте коэффициенты контрастности цветов на соответствие WCAG AA и AAA

Генератор хеш-цвета

Генерируйте согласованные, детерминированные цвета из любой текстовой строки

← На главную