Входные данные
Подготовка рабочей области…
Как пользоваться
- Задайте горизонтальное и вертикальное смещение, размытие и растяжение.
- Выберите цвет и непрозрачность; при необходимости включите «Внутренняя тень».
- Проверьте предпросмотр и скопируйте CSS.
Создание тени блока
Тень отделяет карточку от фона или создаёт эффект углублённой поверхности. Несколько параметров позволяют настроить её без подготовки изображения.
Предпросмотр показывает тень при изменении геометрии и цвета. Радиус углов помогает сравнивать формы, не добавляя посторонние декларации в результат.
Смещение, размытие и растяжение
Смещения перемещают тень относительно элемента. Отрицательные значения сдвигают её влево или вверх, положительные — вправо или вниз.
Размытие смягчает края и не может быть отрицательным. Растяжение меняет область тени: отрицательное сужает, положительное расширяет.
0px 8px 24px 0px, black at 15%box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.15);Одна внешняя тень: смещение вниз 8px, размытие 24px и чёрный с непрозрачностью 15%.
Цвет и inset
Палитра задаёт цвет, а непрозрачность — его alpha. Сквозь менее непрозрачную тень сильнее виден фон страницы.
Inset переносит тень внутрь блока. Генератор создаёт одну тень; для нескольких слоёв нужен список через запятую в таблице стилей.
Использование CSS
Копируется только box-shadow:. Чтобы повторить скругление предпросмотра, отдельно задайте border-radius у элемента.
Текстовый ввод до 1 MiB. Преобразования CSS и HTML выполняются в Worker с ограничением 30 секунд. Инструменты цвета используют sRGB; созданные стили служат предпросмотром и требуют проверки в вашем макете.
Частые вопросы
Входит ли радиус углов в CSS?
Нет. Он влияет лишь на предпросмотр. Добавьте отдельный border-radius, если нужна та же форма.
Чем отличаются размытие и растяжение?
Размытие смягчает край. Растяжение расширяет или сужает область тени перед размытием.
Может ли растяжение быть отрицательным?
Да, это уменьшает тень. Размытие должно быть нулевым или положительным.
Можно ли создать внутреннюю тень?
Да. Включите «Внутренняя тень», и декларация будет содержать ключевое слово inset.
Создаются ли несколько слоёв тени?
Нет, создаётся одна тень. В таблице стилей её можно объединить с другими тенями через запятую.