Для разработчиков / CSS
Генератор CSS-тени блока
Создайте CSS-тень блока визуально: настройте смещения, размытие, растяжение, цвет, прозрачность, inset и несколько слоёв, используйте пресеты и живой предпросмотр, а затем скопируйте CSS.
Генератор CSS-тени блока: Каждый слой становится отдельной тенью в списке box-shadow: горизонтальное и вертикальное смещение, радиус размытия, растяжение и цвет в формате rgb() с прозрачностью после косой черты. Слои отображаются так, что первый находится сверху. Радиус скругления углов, цвет блока и фон предпросмотра можно изменить в соответствии с вашим дизайном — тень повторяет форму углов так же, как на вашей странице. Работает на 100% локально в вашем браузере, файлы на сервер не загружаются.
- Категория
- Инструменты для разработчиков
- Запуски
- В вашем браузере
- Стоимость
- Бесплатно · без регистрации
- Доступность
- Готово к использованию
Полностью работает в браузере
CSS
box-shadow: 0px 4px 6px -1px rgb(0 0 0 / 0.1), 0px 2px 4px -2px rgb(0 0 0 / 0.1);
Значения задают смещение вправо, смещение вниз, размытие, разброс и цвет. Несколько тонких слоёв выглядят естественнее одной плотной тени; последующие слои рисуются под предыдущими.
Предустановки
Высота над поверхностью
В дизайн-системах тени показывают, насколько далеко объект выступает над страницей: у неподвижной карточки тень небольшая и плотная, а у меню или диалогового окна — более крупная и мягкая. Несколько фиксированных уровней вместо отдельной тени для каждого элемента делают интерфейс более целостным.
На тёмном фоне тени почти незаметны; в таком случае ту же задачу решит более светлый цвет поверхности или тонкая граница. Сочетайте тени с градиентом CSS для кнопок и карточек.
Тени и производительность
Большое размытие требует больше ресурсов для отрисовки, чем маленькое, особенно когда одновременно прокручивается или анимируется много элементов с тенями. Чтобы анимировать тень при наведении, плавнее добавить на псевдоэлементе вторую, более сильную тень с помощью opacity, чем менять box-shadow на каждом кадре.
Как пользоваться
- Начните с пресета или настройте смещения, размытие, растяжение и прозрачность первого слоя.
- Добавьте слои для более мягкой и реалистичной тени или включите inset, чтобы разместить тень внутри блока.
- Скопируйте объявление box-shadow.
Конфиденциальность и ограничения
Всё работает в вашем браузере; последняя созданная тень сохраняется только в этом браузере.
Похожие инструменты
Часто задаваемые вопросы
Что означают четыре числа в box-shadow?
Это горизонтальное смещение (положительное значение перемещает тень вправо), вертикальное смещение (положительное значение перемещает её вниз), радиус размытия (чем он больше, тем мягче тень; он не может быть отрицательным) и растяжение (положительное значение увеличивает тень за пределами блока, отрицательное — уменьшает). Цвет указывается в конце.
Как сделать тень естественной?
Используйте небольшую прозрачность, сместите тень вниз, как если бы источник света находился сверху, и объедините два или более слоёв: небольшой и более резкий слой рядом с блоком и большой, более мягкий — дальше от него. Немного отрицательное растяжение не даёт большой области размытия выступать по бокам.
Что делает inset?
Он размещает тень внутри блока, а не снаружи, поэтому блок выглядит вдавленным. Такой эффект подходит для полей ввода и нажатых кнопок.
Почему тень не отображается на изображении?
box-shadow создаётся вокруг блока элемента, а не вокруг формы изображения внутри него. Чтобы обвести прозрачный PNG, используйте CSS-фильтр drop-shadow().
Бесплатный инструмент · запусков: в вашем браузере · аккаунт не нужен