01
Различайте размер и мягкость тени
Измените размытие первой тени и добавьте короткий контактный слой. Отрицательное расширение уменьшает площадь, а смещение переносит её. inset относится только к выбранному слою.
Инструменты HTML и CSS
генератор CSS-эффектовдля настройки каждого элемента
Выберите тень, рамку и углы, преобразование либо фильтр. Вывод относится только к текущему режиму.
генератор CSS-эффектов
Предпросмотр
Цветной фон нужен только для примера и не входит в экспортируемый CSS.
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.18);
Параметры остаются в этой вкладке браузера; изображения и CSS не отправляются.
Параметры эффекта
CSS для Тень блока обновлён.
Тень карточки иногда кажется слишком резкой, хотя её цвет подходит. генератор CSS-эффектов позволяет отдельно изменять размытие, расширение и прозрачность каждого слоя, наблюдая результат до копирования box-shadow.
Этот генератор CSS-эффектов сохраняет настройки рамки, преобразования и фильтра в открытой вкладке. Переключение режимов не объединяет их в один фрагмент: копируется только выбранное объявление.
Зачем нужен генератор CSS-эффектов
Несколько слоёв вместо одной жёсткой тени
Обычный генератор CSS-теней с одним слоем не разделяет мягкую фоновую и короткую контактную тени. Здесь можно наложить до четырёх слоёв с собственным смещением, расширением, цветом и непрозрачностью.
Настройки режимов не смешиваются
генератор CSS-эффектов помнит радиусы углов, преобразования и фильтры, пока вкладка открыта. В копии фильтра не окажутся старая тень или цвет демонстрационного фона.
Что проверить перед экспортом
02
Учитывайте порядок преобразований
Свяжите углы для одного радиуса или задайте четыре значения. Функции выводятся как сдвиг, поворот, масштаб и наклон; перестановка в вашем CSS меняет результат.
03
Дождитесь обновления кода
Автоматическая генерация ждёт около 350 мс после последней правки. При её отключении используйте кнопку или Ctrl/Cmd+Enter. Пример, сброс и удаление слоя требуют подтверждения и допускают одну отмену.
Четыре группы точных настроек
До четырёх теней блока
генератор box-shadow задаёт для каждого слоя X/Y, размытие, расширение, шестнадцатеричный цвет, непрозрачность и inset. Слои соединяются запятыми в одном объявлении.
Рамка и отдельные углы
Скругление углов CSS можно связать общим радиусом или настроить отдельно. При нулевой толщине выводится border: none, а border-radius остаётся.
Преобразования в фиксированном порядке
Сдвиг, поворот, масштаб и наклон комбинируются предсказуемо. Нейтральные функции опускаются; полностью исходное состояние даёт transform: none.
Фильтр без лишних функций
CSS-фильтры включают размытие, яркость, контраст, насыщенность, серый цвет, сепию, поворот оттенка, инверсию и непрозрачность. Нейтральные значения не записываются.
Что входит в вывод и где пределы
- Экспортируется выбранный режим
- Параметры остальных режимов хранятся только в открытой вкладке. Копия и файл .css содержат одну выбранную декларацию, без селектора, HTML, устаревших префиксов или ссылки на проект.
- Ограничения проверяются до копирования
- Допускаются до четырёх теней и шестизначный HEX-цвет. Отрицательное размытие или число за пределами диапазона блокирует экспорт с указанием поля. Отрицательное расширение допустимо.
- Тень коробки отличается от тени изображения
- box-shadow следует рамке элемента, а filter: drop-shadow() может следовать непрямоугольному контуру картинки. Режим фильтра не генерирует drop-shadow или backdrop-filter.
- Нет импорта и анимации
- Инструмент не разбирает вставленный CSS, не создаёт keyframes, 3D-переворот и картинки. Цвет фона плитки показан для примера и не попадёт в код.
Вопросы о генераторе CSS-эффектов
Как создать несколько теней?
Добавьте до четырёх слоёв. Они объединятся через запятую в одном box-shadow в порядке списка.
Что такое inset-тень?
inset рисует выбранную тень внутри прямоугольника элемента. Наружные слои при этом остаются самостоятельными.
Какие готовые примеры доступны?
В каждом режиме есть свой пример: многослойная тень, неодинаковые углы, преобразование или сочетание фильтров. Перед заменой настроек появляется подтверждение.
Можно ли использовать цвета rgba и hex?
Введите шестизначный HEX и отдельно непрозрачность. Для тени создаётся rgba(); готовую строку rgba инструмент не разбирает.
Как сделать мягкую тень вместо резкого края?
Увеличьте размытие, уменьшите непрозрачность и при необходимости добавьте второй короткий слой. Расширение управляет размером, а не мягкостью края.
Нашли неожиданный результат?
Попробуйте генератор CSS-эффектов на карточке
Подберите вид на плитке и перенесите в таблицу стилей только нужное объявление.