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

Создайте объявление CSS box-shadow из значений смещения, размытия, распространения, цвета и непрозрачности с опциональным inset — скопируйте готовую тень rgba() в вашу таблицу стилей.

Ввод

Горизонтальное смещение (px)

Вертикальное смещение (px)

Радиус размытия (px)

Радиус распространения (px)

Цвет тени

Непрозрачность (%)

Объединяется с цветом тени в значение rgba().

Внутренняя тень

Вывод

CSS

Это было полезно?

Другие способы использовать этот инструмент

REST API

curl -X POST https://api.iotools.cloud/v1/tool/css-box-shadow-generator \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "offsetX": "4",
    "offsetY": "4",
    "blurRadius": "10",
    "spreadRadius": "0",
    "color": "#000000",
    "opacity": "25",
    "inset": ""
  }'

Подставьте свой собственный ключ из аккаунта. Поля инструмента — это тело запроса, без обёртки.

Спросите у ИИ-агента

Use the IOTools `css-box-shadow-generator` tool (CSS Box Shadow Generator) on this input:

YOUR_INPUT_HERE

Вставьте это любому агенту, подключённому к MCP-серверу IOTools, и добавьте свой ввод.

Виджет для встраивания

<iframe
  src="https://iotools.cloud/embed/css-box-shadow-generator/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="Генератор CSS Box Shadow — iotools.cloud"
  sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
  allow="clipboard-write"
  style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>

Вставьте это на свою страницу — бесплатно, без ключа, нужна лишь обратная ссылка.

Стоимость вызова API/MCP	От 5 кредитов
Нужно больше кредитов?	Посмотреть тарифы

Также доступно через

Интеграции Расширение для браузера Расширение для VS Code

Руководства

Что это делает

Генератор CSS Box Shadow превращает набор ползунков и выбор цвета в готовое к использованию объявление CSS box-shadow. Отрегулируйте горизонтальное и вертикальное смещение, радиус размытия, радиус распространения, цвет тени и непрозрачность, и при желании преобразуйте тень во внутреннюю тень (inset) — сгенерированный CSS обновляется мгновенно при движении каждого элемента управления.

Синтаксис box-shadow

Объявление CSS box-shadow следует этой структуре:

box-shadow: <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;

offset-x — насколько тень смещена по горизонтали. Положительные значения смещают её вправо, отрицательные значения смещают её влево.
offset-y — насколько тень смещена по вертикали. Положительные значения смещают её вниз, отрицательные значения смещают её вверх.
blur-radius — насколько мягкий край тени. 0 дает резкий край тени; большие значения распространяют размытие дальше и не могут быть отрицательными.
spread-radius — увеличивает (положительное) или уменьшает (отрицательное) тень перед применением размытия. Опционально в чистом CSS, но всегда включено здесь для полностью явного объявления.
color — цвет тени, выводится как rgba(r, g, b, a) так, чтобы альфа-канал захватывал ползунок непрозрачности вместе с значением RGB.
inset — опциональное ключевое слово, размещённое перед смещениями, которое переворачивает тень для отображения внутри границы элемента вместо её внешней стороны (эффект "утопленный" или "вырезанный").

Несколько теней можно складывать, разделяя объявления запятыми (box-shadow: a, b, c;); этот инструмент сосредоточен на создании одного чистого объявления тени за раз, что требуется большинству дизайнов и что вы будете накладывать или уточнять вручную для эффектов множественных теней.

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

Перетащите ползунки Горизонтальное смещение и Вертикальное смещение для позиционирования тени.
Отрегулируйте Радиус размытия для смягчения края и Радиус распространения для увеличения или уменьшения формы тени.
Выберите Цвет тени и установите Непрозрачность — инструмент объединяет оба в одно значение rgba().
Включите Внутренняя тень, если вам нужна внутренняя тень вместо отбрасываемой тени.
Скопируйте сгенерированное объявление box-shadow из вывода кода и вставьте его в вашу таблицу стилей.

FAQ

Почему выход использует rgba() вместо шестнадцатеричного цвета? Потому что шестнадцатеричные цвета CSS (#000000) сами по себе не могут выражать частичную прозрачность. Объединение выбора цвета с ползунком непрозрачности в rgba(r, g, b, a) позволяет вам точно установить, насколько сильной выглядит тень без отдельного свойства opacity, влияющего на остальную часть элемента.

Может ли spread-radius быть отрицательным? Да — отрицательное распространение сжимает форму тени перед применением размытия, что полезно для мягких, локализованных теней (например, тонкий эффект возвышения) вместо тени, которая выходит далеко за границы элемента.

В чем разница между обычной тенью и внутренней тенью? Обычный box-shadow отображается снаружи границы элемента, как если бы элемент был приподнят над страницей. Внутренняя тень отображается внутри границы, что делает элемент похожим на вдавленный или вырезанный.

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

cssbox-shadowgeneratorshadowrgbaweb design

Нравятся инструменты? Уберите рекламу.

Один платёж навсегда убирает всю рекламу с вашего аккаунта. Без подписки, без слежки.

Убрать рекламу