box-shadow: 0px 4px 6px -1px #0000001a, 0px 2px 4px -2px #0000001a;CSS Box Box Generator — это визуальный редактор для свойства CSS Box-Shadow. Вы можете настроить смещение, радиус размытия, радиус спреда, цвет и непрозрачность с помощью ползунков и видите результат в реальном времени на элементе предварительного просмотра, затем скопируйте точный CSS. Вместо того, чтобы угадывать значения пикселей и перезагружать страницу, вы напрямую формируете тень и читаете код, который она создает.
Свойство тени коробок обманчиво глубоко. Одно объявление может складывать несколько теней, каждая со своими собственными смещениями, размытием, разбросом, цветом и необязательным ключевым словом, которое рисует тень внутри элемента, а не снаружи. Реальные тени интерфейса почти всегда используют два или более слоев, чтобы выглядеть естественно, что утомительно писать вручную. Этот инструмент управляет уровнями для вас и выводит объявление spec-valid в правильном порядке, разделенном запятыми.
Все происходит в вашем браузере. Выберите пресет, настройте слои, переключите предварительный просмотр между светлым и темным фонами и скопируйте либо стандартное свойство, либо блок, который также включает префикс -webkit-. Ни аккаунта, ни загрузок, и он продолжает работать в автономном режиме после загрузки страницы.
Выберите предустановленную карту, приподнятую или неоморфную, чтобы получить реалистичную исходную точку, или начните с одного теневого слоя по умолчанию и наращивайте оттуда.
Перетащите горизонтальный и вертикальный сдвиг, радиус размытия и слайдеры радиуса разложения, установите цвет тени и непрозрачность и переключите вставку, чтобы переместить тень внутри коробки.
Добавьте дополнительные слои тени для глубины — мягкая широкая тень под более плотной темной читается как естественная высота. Измените порядок или удалите слои по мере уточнения внешнего вида.
Скопируйте объявление Box-Shadow или префикс блока для старых браузеров и вставьте его прямо в таблицу стилей или стили компонентов.
Сложите любое количество теневых слоев в одно объявление в правильном порядке краски «сверх-нож», как строятся реальные карты и модальные высоты
Ползунки для горизонтального и вертикального смещения, радиуса размытия и радиуса спреда, а также выбора цвета, контроля непрозрачности и вставки в каждой части грамматики
Элемент предварительного просмотра обновляется мгновенно во время редактирования, и вы можете переключать фон между светом и темнотой, чтобы проверить, как читает тень в обеих темах.
Кураторы для тонких, карточных, приподнятых, плавающих, внутренних, свечения, неоморфных и острых теней дают вам проверенную отправную точку вместо чистого холста
Create beautiful CSS gradients with live preview
Pick colors and convert between HEX, RGB, and HSL formats
Check the contrast ratio between a text color and its background against WCAG 2.2 AA and AAA thresholds, with a live preview and one-click accessible-color suggestions.
0 comments
No comments yet. Be the first to share your thoughts!