Основные выводы
- 01Каждый параметр box-shadow имеет свой ползунок плюс числовой ввод для настройки точности в пикселях.
- 02Переключатель Inset переключается между drop shadow и inner shadow для эффектов нажатых или неоморфных.
- 03Цвет и непрозрачность управляются отдельно, выводя rgba() для читаемого CSS.
- 04Предпросмотр использует реальное свойство CSS на реальном элементе — то, что вы видите, это в точности то, что ваша таблица стилей отображает.
Почему использовать визуальный генератор Box-Shadow
CSS box-shadow принимает до шести значений — горизонтальное смещение, вертикальное смещение, радиус размытия, радиус распространения, цвет и дополнительное ключевое слово inset. Введение их по памяти работает для простых теней, но для чего-нибудь более тонкого — плотное свечение, глубокая падающая тень, мягкий слой повышения — вы угадываете и перезагружаетесь, пока что-нибудь не выглядит правильно.
Визуальный генератор сворачивает этот цикл итераций. Переместите ползунок, увидите изменение мгновенно и скопируйте только когда вы будете удовлетворены. Генератор box-shadow Handytool работает полностью в вашем браузере, поэтому предпросмотр — это реальное свойство CSS, применяемое к реальному элементу — никаких различий в отображении между инструментом и вашей фактической страницей.
Как создать тень Box
- 01
Отрегулируйте горизонтальное и вертикальное смещение
Положительные значения перемещают тень вправо и вниз. Отрицательные значения перемещают её влево и вверх. Центрированная тень (0, 0) создает эффект свечения.
- 02
Установите радиус размытия
Более высокие значения размытия создают более мягкие, более рассеянные тени. Нулевое размытие производит четкую, сплошную контур тени.
- 03
Отрегулируйте радиус распространения
Положительное распространение увеличивает тень перед размытием. Отрицательное распространение сужает её, что полезно для плотных теней под элементом.
- 04
Выберите цвет и непрозрачность
Используйте палитру цветов, чтобы выбрать оттенок тени, затем опустите непрозрачность для тонкости. Вывод использует rgba() для сохранения значений читаемыми.
- 05
Переключитесь на встраивание, если необходимо
Inset переключается с падающей тени на внутреннюю тень — полезно для нажатых кнопок, утопленных входов и неоморфных поверхностей.
- 06
Скопируйте декларацию CSS
Нажмите Копировать, чтобы получить полное значение box-shadow и вставьте его в вашу таблицу стилей.
Нет загрузки, нет аккаунта
Генератор полностью использует клиентскую сторону. Выбор цвета, числовые значения и состояния предпросмотра остаются в вашем браузере — ничего не отправляется на сервер. Нет аккаунта для создания и нет ограничения использования.
Поскольку элемент предпросмотра использует реальное свойство CSS box-shadow, вывод точен по определению — нет отображения холста или аппроксимации снимка экрана. Значения пикселей, которые вы копируете, — это значения пикселей, которые применяет браузер.
Часто задаваемые вопросы о генераторе Box-Shadow
Что делает значение распространения?
Положительное распространение увеличивает тень во всех направлениях перед применением размытия; отрицательное распространение сужает её. Полезно для плотных, определенных свечений в сочетании с низким размытием.
Могу ли я добавить несколько box shadows?
Этот генератор выводит одну тень за раз. Чтобы их наслаивать, скопируйте значение и разделите несколько теней запятыми в CSS — box-shadow принимает список, разделенный запятыми.
Почему моя встроенная тень невидима?
Встроенные тени рисуют внутри элемента, поэтому им нужен цвет фона или видимый отступ для отображения. Они не появятся на прозрачных или нулевых элементах размера.
Является ли предпросмотр точным в пиксели?
Да — предпросмотр использует реальное свойство CSS box-shadow на реальном элементе DOM, поэтому то, что вы видите, это в точности то, что будет создавать ваша таблица стилей.
Что такое неоморфная тень?
Неоморфизм использует две тени — одну светлую и одну темную — смещенные в противоположных направлениях, чтобы элемент казался поднятым или нажатым на плоской поверхности. Обе тени обычно встраиваются для варианта нажатия.