Генератор теней CSS (box-shadow, text-shadow)
Настройте ползунками многослойные box-shadow, внутренние тени, text-shadow и фильтры drop-shadow, проверьте их на карточке предпросмотра и скопируйте CSS
Загрузка инструмента…
Настраивает box-shadow, text-shadow и filter: drop-shadow() ползунками, складывает несколько слоёв тени и выдаёт CSS. Используйте его, чтобы подобрать глубину карточки или кнопки, вдавленный вид с inset или обводку текста, наблюдая за живым предпросмотром.
Как пользоваться
- В поле «Тип» выберите box-shadow, text-shadow или filter: drop-shadow.
- В каждом слое под «Слои тени» задайте «Смещение X», «Смещение Y», «Размытие», «Растяжение» (только box-shadow), «Цвет тени» и «Непрозрачность». Включите «Внутренняя», чтобы получить внутреннюю тень.
- Нажмите «Добавить слой» или «Дублировать», чтобы добавить слои, и меняйте их порядок стрелками. Снятый флажок временно исключает слой.
- В предпросмотре слева задайте «Фон», «Цвет карточки», «Радиус углов» и «Размер карточки», чтобы они соответствовали вашему реальному экрану.
- При желании выберите отправную точку в «Пресеты», затем нажмите «Копировать» рядом с CSS.
Как это работает
- Один слой box-shadow записывается как «[inset] x y размытие растяжение цвет». Положительное растяжение увеличивает тень, отрицательное уменьшает её. У text-shadow нет растяжения и inset.
- filter: drop-shadow() повторяет видимую форму (значок PNG, SVG), а не прямоугольник, и несколько функций, записанных подряд, накладываются друг на друга.
- Цвета записываются как HEX, если они непрозрачны, и как rgb(r g b / a) в остальных случаях. Естественная глубина обычно получается из двух или трёх слоёв с низкой непрозрачностью и нарастающим размытием.
- Слои и настройки предпросмотра хранятся в этом браузере.
Частые вопросы
- В каком порядке идут значения в box-shadow?
- Смещение X, смещение Y, размытие, растяжение, цвет; для внутренней тени inset ставится первым. Например: box-shadow: 0 4px 12px rgb(0 0 0 / 0.15).
- Как сделать карточке естественную тень?
- Сложите два или три слоя с непрозрачностью от 10 до 20 процентов и шаг за шагом увеличивайте вертикальное смещение и размытие. Пресеты «Средний подъём» и «Мягкая, 5 слоёв» построены именно так.
- Можно ли сделать обводку текста с помощью text-shadow?
- Да. Четыре тени без размытия в четырёх направлениях (1px 1px, -1px -1px, 1px -1px, -1px 1px) образуют тонкую обводку. Пресет «Обводка текста» делает именно это.
- В чём разница между box-shadow и фильтром drop-shadow?
- box-shadow создаёт тень от прямоугольного блока элемента; фильтр drop-shadow создаёт тень от видимой формы. Для значков или SVG на прозрачном фоне подходит drop-shadow.