box-shadow: 0px 4px 6px -1px #0000001a, 0px 2px 4px -2px #0000001a;Что такое генератор теней CSS Box?

CSS Box Box Generator — это визуальный редактор для свойства CSS Box-Shadow. Вы можете настроить смещение, радиус размытия, радиус спреда, цвет и непрозрачность с помощью ползунков и видите результат в реальном времени на элементе предварительного просмотра, затем скопируйте точный CSS. Вместо того, чтобы угадывать значения пикселей и перезагружать страницу, вы напрямую формируете тень и читаете код, который она создает.
Свойство тени коробок обманчиво глубоко. Одно объявление может складывать несколько теней, каждая со своими собственными смещениями, размытием, разбросом, цветом и необязательным ключевым словом, которое рисует тень внутри элемента, а не снаружи. Реальные тени интерфейса почти всегда используют два или более слоев, чтобы выглядеть естественно, что утомительно писать вручную. Этот инструмент управляет уровнями для вас и выводит объявление spec-valid в правильном порядке, разделенном запятыми.
Все происходит в вашем браузере. Выберите пресет, настройте слои, переключите предварительный просмотр между светлым и темным фонами и скопируйте либо стандартное свойство, либо блок, который также включает префикс -webkit-. Ни аккаунта, ни загрузок, и он продолжает работать в автономном режиме после загрузки страницы.
Тени нарисованы вне коробки и не занимают места, поэтому они никогда не толкают соседей вокруг и будут подрезаны любым предком с переливом скрыто Распространение является наименее понятным значением: он растет или сжимает теневую форму перед размытием, поэтому положительный разброс с нулевым размытием дает твердый контур смещения, который является как эффекты границы подделываются, не влияя на расположение.Вставка перемещает тень внутри элемента, полезная для нажатых состояний и внутренних свечений. Наслоение нескольких теней с увеличением смещения и размытия является тем, насколько убедительна глубина, так как одно большое размытие читается как туман, а не как тень. Каждый слой стоит времени рендеринга, а тени, которые перекрашиваются во время прокрутки или анимации, являются распространенным источником джанк на устройствах с меньшей мощностью.
Как использовать генератор теней CSS Box?
Начать с предустановленного или пустого слоя
Выберите предустановленную карту, приподнятую или неоморфную, чтобы получить реалистичную исходную точку, или начните с одного теневого слоя по умолчанию и наращивайте оттуда.
Настройте тень с помощью слайдеров
Перетащите горизонтальный и вертикальный сдвиг, радиус размытия и слайдеры радиуса разложения, установите цвет тени и непрозрачность и переключите вставку, чтобы переместить тень внутри коробки.
При необходимости складывайте больше слоев
Добавьте дополнительные теневые слои для глубины - мягкая широкая тень под более плотной темной, которая читается как естественная высота. Измените порядок или удалите слои, как вы уточняете внешний вид.
Скопируйте CSS
Скопируйте объявление Box-Shadow или префикс блока для старых браузеров и вставьте его прямо в таблицу стилей или стили компонентов.
Основные характеристики
Многослойные тени
Сложите любое количество теневых слоев в одно объявление в правильном порядке краски «сверх-нож», как строятся реальные карты и модальные высоты
Полный контроль собственности
Ползунки для горизонтального и вертикального смещения, радиуса размытия и радиуса спреда, а также выбора цвета, контроля непрозрачности и вставки в каждой части грамматики
Живой превью
Элемент предварительного просмотра обновляется мгновенно во время редактирования, и вы можете переключать фон между светом и темнотой, чтобы проверить, как читает тень в обеих темах.
Готовые пресеты
Кураторы для тонких, карточных, приподнятых, плавающих, внутренних, свечения, неоморфных и острых теней дают вам проверенную отправную точку вместо чистого холста
Frequently Asked Questions
Related Tools
CSS Border Radius Generator
Round any corner with a live preview and per-corner sliders, switch between px, %, em, and rem, and copy the shortest valid CSS border-radius.
CSS Clamp Generator
Generate fluid, responsive CSS clamp() values that scale between viewports
CSS Unit Converter
Convert between CSS units - px, rem, em, pt and % - with a configurable root font size, instant all-units output, and a px-to-rem reference table for responsive typography.
Flexbox Generator
Build CSS flexbox layouts visually. Adjust justify-content, align-items, direction, wrap and gap with a live preview, then copy the generated CSS - all in your browser.
Comments
0 comments
No comments yet. Be the first to share your thoughts!