Генератор теней CSS (box-shadow)
Создавайте тени CSS наглядно: несколько слоёв, внутренние тени, размытие, растяжение и цвет. Живой предпросмотр, экспорт в CSS, SCSS или Tailwind.
Загрузка: Генератор CSS box-shadow…
Ваши файлы не покидают устройство
Как пользоваться: Генератор CSS box-shadow
- 1
Откройте «Генератор CSS box-shadow» на этой странице. Инструмент загружается прямо в браузере.
- 2
Добавьте файл, текст или значения и настройте параметры.
- 3
Скопируйте или скачайте результат. Ничего не загружается и не хранится.
Об инструменте
Свойство CSS box-shadow добавляет глубину карточкам, кнопкам и изображениям, но подбирать значения вручную приходится наугад. Этот генератор box-shadow позволяет настроить тень ползунками, увидеть её на блоке предпросмотра и скопировать чистый код в CSS, SCSS или в виде записи конфигурации Tailwind.
Как создать тень
- Задайте горизонтальное и вертикальное смещение, чтобы сдвинуть тень.
- Увеличьте размытие для мягкого края и настройте растяжение, чтобы увеличить или уменьшить тень.
- Выберите цвет и прозрачность.
- Отметьте inset, чтобы тень была внутри блока.
- Добавляйте слои, дублируйте и удаляйте их, включайте и выключайте каждый.
- Измените цвет блока и фон предпросмотра под свой дизайн и скопируйте код.
Синтаксис box-shadow
box-shadow: [inset] offset-x offset-y blur spread color;
Например, box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15); даёт мягкую тень прямо под элементом. Несколько теней можно объединить через запятую, и первая рисуется поверх остальных.
Рецепты теней
- Мягкая карточка: маленькое смещение, большое размытие и низкая прозрачность, например 0 4px 12px с чёрным на 10 до 15 процентов.
- Реалистичная глубина: два слоя, плотный и более тёмный рядом с элементом и широкий очень светлый подальше.
- Нажатая кнопка: внутренняя тень у верхнего края.
- Свечение или неон: нулевое смещение, большое размытие и яркая цветная тень; наложите два цвета для большей яркости.
- Узкая тень: отрицательное растяжение делает тень уже блока, и она видна только снизу.
Советы
- Держите одно направление света во всём интерфейсе, обычно сверху, чтобы все тени падали одинаково.
- Тонируйте тени тёмным оттенком цвета фона вместо чистого чёрного, так они выглядят естественнее.
- Следите за производительностью: очень большое размытие на множестве элементов может замедлить прокрутку на старых телефонах.
Сочетайте тени со скруглёнными углами из генератора border-radius и фонами из генератора CSS градиентов.
Частые вопросы
Что означают значения box-shadow?
По порядку: горизонтальное смещение, вертикальное смещение, радиус размытия, радиус растяжения и цвет. Слово inset в начале рисует тень внутри элемента.
Как добавить больше одной тени?
Добавьте ещё один слой в генераторе. В CSS несколько теней записываются в одном свойстве box-shadow через запятую.
Что такое внутренняя тень inset?
Тень, которая рисуется внутри границы элемента, а не снаружи. Её часто используют для нажатых кнопок и полей ввода.
Можно ли получить тень как класс Tailwind?
Да. Экспорт Tailwind даёт запись boxShadow для tailwind.config.js, и тень можно использовать как собственный класс, например shadow-custom.
Что делает отрицательное растяжение?
Оно делает тень меньше элемента, поэтому она выглядывает только со стороны смещения и получается более плотной и сфокусированной.
Почему тень выглядит слишком тёмной?
Уменьшите непрозрачность, увеличьте размытие или используйте тёмный оттенок цвета фона вместо чистого чёрного.