Генератор CSS box-shadow — Бесплатно Онлайн
Визуально создавайте CSS-тени с настройками смещения, размытия, распространения и цвета.
Who uses the Генератор CSS box-shadow?
- UI-разработчики, генерирующие тени карточек и кнопок, соответствующие спецификациям их дизайн-системы.
- Изучающие CSS, исследующие свойства теней через визуальный интерфейс с мгновенной обратной связью.
- Дизайнеры, создающие и тестирующие эффекты теней для макетов перед передачей разработчикам.
How the Генератор CSS box-shadow works
Настройте ползунки смещения X, смещения Y, радиуса размытия и радиуса растяжения, чтобы сформировать тень.
Нажмите на образец цвета, чтобы выбрать цвет тени, и используйте ползунок прозрачности рядом с ним.
Включите Inset для эффекта внутренней тени.
Скопируйте CSS из панели вывода кода.
Tips & tricks
- Этот инструмент выводит один слой тени — для многослойного эффекта (как Material Design elevation) сгенерируйте каждый слой здесь отдельно и объедините их запятыми вручную.
- Отрицательное растяжение с большим размытием создаёт мягкую, рассеянную тень, которая выглядит более «парящей», чем тень с плотным положительным растяжением.
- Внутренние тени хорошо подходят для состояний нажатой кнопки — попробуйте небольшое размытие с тёмным цветом низкой непрозрачности.
- Ползунок непрозрачности управляет альфа-каналом цвета тени, а не непрозрачностью самого элемента.
Frequently Asked Questions
Каков синтаксис CSS box-shadow?
box-shadow: [inset] смещение-X смещение-Y радиус-размытия радиус-растяжения цвет. Пример: box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1). Несколько теней разделяются запятыми.
Что делает радиус растяжения?
Радиус растяжения расширяет или сжимает тень перед размытием. Положительные значения увеличивают тень больше элемента; отрицательные — уменьшают. Растяжение -4px с размытием 8px создаёт сфокусированную, направленную тень.
Что такое внутренняя тень (inset)?
Отметка флажка Inset делает тень видимой внутри границы элемента, а не снаружи. Внутренние тени создают состояния нажатых/вдавленных кнопок, эффекты вложенных карточек и внутреннее свечение.
Может ли этот инструмент генерировать несколько наложенных слоёв теней, как в Material Design elevation?
Нет — этот инструмент генерирует один слой тени за раз. Для многослойного эффекта вроде Material Design elevation (box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0px rgba(0,0,0,0.14), 0 1px 10px 0px rgba(0,0,0,0.12)) сгенерируйте каждый слой здесь отдельно и объедините значения через запятую вручную.
Влияет ли box-shadow на разметку и занимает ли место?
Нет. В отличие от margin или padding, box-shadow не влияет на разметку — элементы с тенями не отталкивают соседние элементы. Это делает тени безопасными для добавления без нарушения разметки страницы.
Is my data safe when using the Генератор CSS box-shadow?
Completely safe. The Генератор CSS box-shadow processes everything locally in your browser. No input data, results, or usage information is ever transmitted to or stored on any server.
Can I use the Генератор CSS box-shadow output in commercial projects?
Yes. The Генератор CSS box-shadow is a utility tool and its output carries no licensing restrictions. You are free to use results in any project, commercial or personal.
Does the Генератор CSS box-shadow follow official standards?
Yes. The Генератор CSS box-shadow is built to comply with the relevant industry standard or specification for this utility type. If you encounter an unexpected result, verify your input against the specification — edge cases outside the standard may produce undefined behaviour.