Превью
Примеры box-shadow
Как создать CSS box-shadow
Генератор CSS box-shadow
Инструмент собирает свойство box-shadow по ползункам: вы двигаете смещение, размытие и распространение, подбираете цвет с прозрачностью и сразу видите результат на карточке. Готовую строку остается скопировать в стиль.
Тень в CSS описывается пятью значениями: смещение по горизонтали, смещение по вертикали, размытие (blur), распространение (spread) и цвет. Ключевое слово inset превращает наружную тень во внутреннюю - это удобно для вдавленных полей, переключателей и вложенных панелей.
Несколько ориентиров для типовых теней:
- мягкая тень карточки - небольшое смещение по Y, крупное размытие, прозрачность около 0.1-0.2;
- приподнятый блок - смещение по Y больше размытия дает более четкий край;
- свечение вокруг элемента - нулевое смещение, большое размытие и насыщенный цвет.
Готовые пресеты в карточке (Мягкая, Карточка, Приподнятая, Свечение и другие) удобно взять за основу и донастроить ползунками под свой макет.
Как собрать CSS box-shadow
-
Настройте параметры тени
Ползунками задайте смещение X и Y, размытие, распространение, затем выберите цвет и прозрачность.
-
Проверьте на превью
Блок в области Превью сразу показывает тень; фон сцены можно сменить кнопками Светлый, Серый, Темный, Синий.
-
Скопируйте box-shadow
Готовая строка появится в поле CSS - нажмите Копировать и вставьте свойство в свой стиль.
Вопросы и ответы
Включите галочку "Внутренняя тень (inset)" - тень уйдет внутрь блока, а в свойство добавится ключевое слово inset.
Смещение по X и Y, размытие (blur), распространение (spread), цвет и прозрачность. Все меняется ползунками, превью обновляется сразу.
Размытие (blur) размывает край тени, распространение (spread) увеличивает или уменьшает ее размер. Отрицательное распространение делает тень компактнее самого блока.
Это CSS-свойство рисует тень вокруг элемента: задаются смещение по X и Y, размытие, распространение и цвет, а inset переключает тень на внутреннюю.