Как пользоваться: Генератор box-shadow
- 1
Выберите исходную тень
Нажмите шаблон, например «Мягкая», «Многослойная» или «Высота 2», либо настройте слой по умолчанию.
- 2
Настройте каждый слой
Выберите слой и задайте смещение по X и Y, размытие, растяжение, цвет, непрозрачность и режим «Внутренняя».
- 3
Проверьте на своей поверхности
Измените размер блока, радиус скругления и цвета, чтобы они совпадали с оформляемым элементом.
- 4
Скопируйте CSS
Скопируйте объявление box-shadow или класс Tailwind в свой код.
Лимиты и Pro
Бесплатно и без регистрации: неограниченное число слоёв, смещение от −100 до 100 px, размытие до 200 px и 12 шаблонов теней.
Pro убирает рекламу; редактор теней полностью доступен на любом тарифе. Смотреть Pro
О инструменте «Генератор box-shadow»
Свойство CSS box-shadow принимает список слоёв. У каждого слоя есть горизонтальное и вертикальное смещение, радиус размытия, растяжение, цвет и необязательное ключевое слово inset. Чтобы глубина выглядела естественно, нужно сбалансировать все эти параметры на двух и более слоях, а подбирать числа прямо в таблице стилей неудобно. Этот редактор показывает результат на живом блоке предпросмотра, пока вы двигаете ползунки, и сам записывает объявление и класс Tailwind вида shadow-[…].
Добавляйте сколько угодно слоёв, временно скрывайте любой из них для сравнения, перемещайте вверх и вниз (первый слой в списке рисуется сверху) или переключайте на «Внутренняя» для нажатых кнопок и полей ввода. Смещение задаётся от −100 до 100 пикселей, размытие — до 200 пикселей, растяжение — от −100 до 100, а у каждого цвета есть своя непрозрачность. Отрицательное растяжение — приём современных мягких теней: оно подтягивает тень под элемент, и снизу виден лишь лёгкий ореол.
Для блока предпросмотра можно задать размер, любой радиус скругления, цвет блока и цвет фона. Так вы оцените тень на настоящей поверхности вашего дизайна, в том числе в тёмных темах, где тени нужна большая непрозрачность или цветное свечение.
В набор входят двенадцать шаблонов: четыре уровня высоты Material Design, мягкая однослойная тень, плавная пятислойная, жёсткое смещение в духе необрутализма, неоморфизм, внутренняя тень, цветное свечение, контурное кольцо для фокуса и парящая карточка. Градиенты находятся на другой вкладке; тени текста и фильтр drop-shadow() не поддерживаются.
Конфиденциальность
Тень создаётся и показывается целиком на этой странице, а ваши слои сохраняются только в локальном хранилище этого браузера, чтобы пережить перезагрузку. Никакие настройки и дизайны не отправляются на сервер.