ToolBox ProБлогEnglish

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

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

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

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

Подобрать box-shadow вручную — значит вслепую перебирать пять значений в одной строке CSS. Здесь двигайте ползунки смещения, размытия, растяжения, цвета и прозрачности и сразу видите результат. Сложные эффекты собирайте из нескольких слоёв, а режим inset сделает тень внутренней.

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

  • Предпросмотр в реальном времени с настраиваемыми цветами фона
  • Несколько слоёв тени — добавление, удаление и независимая настройка каждого
  • Переключатель внутренней тени (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

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

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

← На главную