Генератор box-shadow CSS
Настройте смещение, размытие, растяжение, цвет и прозрачность с помощью ползунков и палитры цвета, чтобы создать box-shadow на CSS, увидеть его в реальном времени на образце и скопировать сгенерированное объявление box-shadow прямо в вашу таблицу стилей.
box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.35);Как это работает
Смещение по X и смещение по Y перемещают тень по горизонтали и вертикали, радиус размытия смягчает её край, а радиус растяжения увеличивает или уменьшает её перед применением размытия. Выберите цвет и прозрачность тени и включите «inset», чтобы нарисовать тень внутри границы блока, а не снаружи.
Совет
Сдержанные тени обычно выглядят лучше всего: небольшое смещение, радиус размытия примерно в два-три раза больше смещения и прозрачность значительно ниже 50% создают эффект мягкого, естественного приподнимания, а не тяжёлого контура.
Можно ли накладывать несколько теней?
Да — свойство CSS box-shadow принимает список теней через запятую, расположенных друг над другом сверху вниз. Этот инструмент создаёт по одной тени за раз; объедините несколько сгенерированных объявлений через запятую, чтобы получить многослойные, более реалистичные тени.
Больше инструментов в этой категории
Тестер регулярных выражений
Проверяйте регулярные выражения на примере текста с мгновенной подсветкой совпадений.
Разбор cron-выражений
Разберите 5-компонентное cron-выражение в понятное описание расписания и посмотрите ближайшие запуски.
Конвертер текстовых кодировок
Одновременно конвертируйте текст в UTF-8 hex, двоичный код, кодовые точки, Base64, URL-кодирование и HTML-сущности.
Генератор паролей
Мгновенно создавайте надёжные случайные пароли прямо в браузере.
Форматирование и валидация JSON
Форматируйте, проверяйте и сжимайте JSON мгновенно прямо в браузере.
Генератор UUID
Генерируйте случайные UUID версии 4 (RFC 4122) прямо в браузере.
Декодер JWT
Декодируйте и изучайте JSON Web Token (JWT) прямо в браузере.
Сравнение текста
Сравните два блока текста и сразу увидьте каждую добавленную или удалённую строку.
Генератор слагов
Превращайте любой текст в аккуратный, удобный для URL слаг в реальном времени.
Конвертер систем счисления
Мгновенно переводите числа между двоичной, восьмеричной, десятичной и шестнадцатеричной системами.
Конвертер Unix-времени
Мгновенно переводите Unix-время в дату и дату в Unix-время.
Генератор хешей
Создавайте хеши SHA-1, SHA-256 и SHA-512 из любого текста прямо в браузере.
Генератор cron-выражений
Составьте корректное 5-компонентное cron-выражение с помощью удобной формы — без необходимости запоминать синтаксис.
Генератор Lorem Ipsum
Генерируйте текст-заполнитель Lorem Ipsum абзацами, предложениями или словами для макетов и раскладок.
Просмотр Markdown
Пишите Markdown слева и мгновенно видите отрендеренный HTML справа.
Калькулятор IP-подсети
Введите адрес IPv4 в нотации CIDR и получите сеть, маску, широковещательный адрес и диапазон хостов.
Справочник кодов состояния HTTP
Найдите любой код состояния HTTP и узнайте его стандартное значение простыми словами.
Форматировщик SQL
Превратите минифицированный или неаккуратный SQL в читаемые, отформатированные с отступами запросы.
Конвертер изображения в Base64
Преобразуйте изображение в data URI Base64, который можно сразу вставить в HTML, CSS или JSON — всё прямо в браузере.
Компаратор Semver
Сравните две строки семантической версии и узнайте, какая имеет приоритет, согласно официальным правилам semver.