Генератор CSS box-shadow
Создавайте точные CSS-коды для теней блоков. Настраивайте смещение, размытие, цвет и внутреннюю тень для веб-дизайна.
Запустить инструмент
Этот инструмент помогает веб-разработчикам и дизайнерам быстро создавать корректный CSS-код для свойства box-shadow. Вы можете точно настроить горизонтальное и вертикальное смещение тени, радиус размытия и радиус расширения. Интерфейс позволяет выбрать любой цвет в шестнадцатеричном формате и активировать режим внутренней тени для элементов с эффектом вдавливания. После настройки параметров система генерирует готовую строку стиля, которую можно сразу скопировать в таблицу стилей вашего проекта. Такой подход экономит время на ручные вычисления и подбор визуальных эффектов. Инструмент поддерживает нулевые значения для всех числовых полей, что полезно для создания плоских дизайнов или сброса стандартных стилей браузера. Результат отображается мгновенно после изменения любого параметра. Это решение подходит для прототипирования интерфейсов, настройки карточек товаров, кнопок и модальных окон. Используйте генератор для получения предсказуемого визуального результата без необходимости запоминать синтаксис сложных составных значений CSS.
Инструкция
- Введите числовые значения для горизонтального и вертикального смещения тени в пикселях.
- Укажите радиус размытия и радиус расширения тени, используя положительные числа.
- Выберите цвет тени, введя шестнадцатеричный код или название цвета.
- Отметьте галочкой опцию inset, если требуется создать внутреннюю тень.
- Скопируйте полученную CSS-строку из поля результата и вставьте её в свой файл стилей.
Примеры
- Мягкая внешняя тень: смещение 2px, размытие 5px, цвет #00000033.
- Внутренняя тень для эффекта вдавленной кнопки: inset, смещение 1px, размытие 3px, цвет черный.
Частые вопросы
Какие единицы измерения используются для значений тени?
Инструмент автоматически добавляет суффикс px ко всем числовым значениям смещения, размытия и расширения.
Можно ли создать только внутреннюю тень?
Да, для этого нужно активировать чекбокс внутренней тени и при необходимости установить нулевые значения для внешнего смещения.
Что произойдет, если ввести нули во все числовые поля?
Генератор создаст валидную CSS-строку с нулевыми параметрами, что может использоваться для сброса стилей или тестирования.
Как задать прозрачность цвета тени?
Используйте восьмизначный шестнадцатеричный код цвета, где последние две цифры отвечают за уровень альфа-канала.