Command Palette

Search for a command to run...

CS

CSS-генератор теней

Разработайте многослойные тени CSS с предварительным просмотром в реальном времени и ползунки для смещения, размытия, размазывания, цвета, непрозрачности и вставки, а затем скопируйте готовый к производству CSS.

Presets
Shadow layers
Offset X0px
Offset Y4px
Blur6px
Spread-1px
Opacity10%
Generated CSS
box-shadow: 0px 4px 6px -1px #0000001a, 0px 2px 4px -2px #0000001a;
Category:css
Mode:Offline
Version:1.0.0
Access:Free

Что такое генератор теней CSS Box?

CSS Box Shadow Generator interface on Toolz.dev - Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset - then copy production-ready CSS.

CSS Box Box Generator — это визуальный редактор для свойства CSS Box-Shadow. Вы можете настроить смещение, радиус размытия, радиус спреда, цвет и непрозрачность с помощью ползунков и видите результат в реальном времени на элементе предварительного просмотра, затем скопируйте точный CSS. Вместо того, чтобы угадывать значения пикселей и перезагружать страницу, вы напрямую формируете тень и читаете код, который она создает.

Свойство тени коробок обманчиво глубоко. Одно объявление может складывать несколько теней, каждая со своими собственными смещениями, размытием, разбросом, цветом и необязательным ключевым словом, которое рисует тень внутри элемента, а не снаружи. Реальные тени интерфейса почти всегда используют два или более слоев, чтобы выглядеть естественно, что утомительно писать вручную. Этот инструмент управляет уровнями для вас и выводит объявление spec-valid в правильном порядке, разделенном запятыми.

Все происходит в вашем браузере. Выберите пресет, настройте слои, переключите предварительный просмотр между светлым и темным фонами и скопируйте либо стандартное свойство, либо блок, который также включает префикс -webkit-. Ни аккаунта, ни загрузок, и он продолжает работать в автономном режиме после загрузки страницы.

Тени нарисованы вне коробки и не занимают места, поэтому они никогда не толкают соседей вокруг и будут подрезаны любым предком с переливом скрыто Распространение является наименее понятным значением: он растет или сжимает теневую форму перед размытием, поэтому положительный разброс с нулевым размытием дает твердый контур смещения, который является как эффекты границы подделываются, не влияя на расположение.Вставка перемещает тень внутри элемента, полезная для нажатых состояний и внутренних свечений. Наслоение нескольких теней с увеличением смещения и размытия является тем, насколько убедительна глубина, так как одно большое размытие читается как туман, а не как тень. Каждый слой стоит времени рендеринга, а тени, которые перекрашиваются во время прокрутки или анимации, являются распространенным источником джанк на устройствах с меньшей мощностью.

Как использовать генератор теней CSS Box?

1

Начать с предустановленного или пустого слоя

Выберите предустановленную карту, приподнятую или неоморфную, чтобы получить реалистичную исходную точку, или начните с одного теневого слоя по умолчанию и наращивайте оттуда.

2

Настройте тень с помощью слайдеров

Перетащите горизонтальный и вертикальный сдвиг, радиус размытия и слайдеры радиуса разложения, установите цвет тени и непрозрачность и переключите вставку, чтобы переместить тень внутри коробки.

3

При необходимости складывайте больше слоев

Добавьте дополнительные теневые слои для глубины - мягкая широкая тень под более плотной темной, которая читается как естественная высота. Измените порядок или удалите слои, как вы уточняете внешний вид.

4

Скопируйте CSS

Скопируйте объявление Box-Shadow или префикс блока для старых браузеров и вставьте его прямо в таблицу стилей или стили компонентов.

Основные характеристики

Многослойные тени

Сложите любое количество теневых слоев в одно объявление в правильном порядке краски «сверх-нож», как строятся реальные карты и модальные высоты

Полный контроль собственности

Ползунки для горизонтального и вертикального смещения, радиуса размытия и радиуса спреда, а также выбора цвета, контроля непрозрачности и вставки в каждой части грамматики

Живой превью

Элемент предварительного просмотра обновляется мгновенно во время редактирования, и вы можете переключать фон между светом и темнотой, чтобы проверить, как читает тень в обеих темах.

Готовые пресеты

Кураторы для тонких, карточных, приподнятых, плавающих, внутренних, свечения, неоморфных и острых теней дают вам проверенную отправную точку вместо чистого холста

Frequently Asked Questions

Box-Shadow добавляет одну или несколько теней вокруг кадра элемента. Каждая тень принимает горизонтальное смещение, вертикальный смещение, необязательный радиус размытия, необязательный радиус разворота и цвет с необязательным ключевым словом вставки для рисования тени внутри коробки. Несколько теней разделяются запятыми.

Comments

0 comments

0/2000 characters

No comments yet. Be the first to share your thoughts!

box shadow generatorcss box shadowbox-shadow cssshadow generatorcss shadow makermultiple box shadowinset shadow cssneumorphism generatordrop shadow csscss box shadow generator