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