Генератор box-shadow

Что такое генератор box-shadow и кнопки?#

box-shadow — это CSS-правило, рисующее тень позади элемента. Несмотря на название, оно умеет куда больше теней: правильно наслоенное, оно даёт то мягкое возвышение, от которого современные UI-карточки и кнопки кажутся физическими; может вырезать внутреннюю канавку для состояния «нажато» и имитировать цветное свечение вокруг сфокусированного поля ввода. Загвоздка в том, что сделать одну тень правильно — значит жонглировать пятью значениями на слой (смещение X, смещение Y, размытие, растяжение, цвет) плюс опциональным ключевым словом inset, — а большинство реальных кнопок складывают две-три тени, поэтому в итоге приходится крутить десять-пятнадцать чисел вручную.

Эта страница убирает арифметику. Вы наслаиваете слои тени и настраиваете радиус, рамку, отступ и цвета кнопки на боковой панели; правая панель показывает живую кнопку с применённой тенью и выписывает как CSS-правило .btn, так и соответствующий HTML <button> для вставки. Значение по умолчанию, которое вы видите при загрузке, — знакомая двухслойная возвышенная кнопка из современных дизайн-систем: достойная стартовая точка, которую вы потом двигаете к своему бренду.

Как пользоваться#

Боковая панель содержит управление; правая панель — превью, вывод CSS и вывод HTML.

1. Постройте тень. Под Тени нажмите Добавить слой, чтобы наложить новый слой. У каждого слоя шесть параметров:
   • Смещение X / Смещение Y — насколько тень смещается вправо/вниз (отрицательные значения — влево/вверх). 0/0 центрирует её, давая равномерное свечение.
   • Размытие — насколько мягкий край. 0 — резкая, плоская копия; большие значения рассеивают её. Размытие не может быть отрицательным в CSS.
   • Растяжение — увеличивает или уменьшает охват тени. Отрицательное растяжение стягивает широкое размытие в плотный, убедительный край.
   • Цвет — HEX-цвет. Используйте альфа-канал (8-значный HEX вроде #00000033), чтобы сделать тень полупрозрачной; полностью непрозрачные цвета выводятся как сплошные #RRGGBB.
   • Внутренняя — переверните, чтобы рисовать тень внутри элемента (вдавленный, вырезанный вид) вместо позади него.
   • Поднять слой / Опустить слой / Удалить меняют порядок или удаляют слои. Первый слой в списке рисуется сверху; последний — дальше всего сзади.
2. Стилизуйте кнопку. Под Кнопка задайте текст Подпись, затем Радиус, ширину Рамка, Цвет рамки, Отступ Y / X, Фон и Цвет текста. Поля цвета совмещают HEX-текстовое поле с нативным пипеткой цвета.
3. Копируйте нужное. Копировать рядом с выводом CSS забирает полное правило .btn; Копировать рядом с выводом HTML забирает элемент <button>. Установка ширины рамки в 0 схлопывает её в border: none;.

Ключевые возможности#

• Много слоёв в нужном порядке. Убедительная тень — почти всегда два-три слоя: плотный тёмный край близко к элементу и более мягкая, светлая заливка дальше. Можно наслаивать и переупорядочивать сколько угодно.
• Учитывающая альфу сериализация цвета. Полностью непрозрачный цвет выводится как чистый #RRGGBB; как только добавляется прозрачность, переключается на rgba(r, g, b, a) с обрезанной альфой — формы, которые реальные таблицы стилей используют на деле.
• Целая кнопка в одном правиле. Радиус, рамка, отступ, фон, цвет текста и тень выводятся в один блок .btn, поэтому одной вставкой элемент стилизуется целиком.
• HTML в соответствии. Вывод HTML — это просто <button class="btn">Подпись</button>, с HTML-экранированной подписью — даже подпись, полная < или &, безопасна к вставке.
• Живое превью зафиксировано слева направо. Положительное смещение X всегда сдвигает тень вправо, поэтому превью принудительно LTR независимо от языка страницы.

Разбор примера#

Страница загружается с готовой возвышенной индиго-кнопкой. Её тень — два слоя: плотный край с растяжением -1px, облегающий кнопку, и более широкая, более бледная заливка дальше. Точный сгенерированный CSS:

.btn {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 10px 15px -3px rgba(0, 0, 0, 0.102);
  border-radius: 8px;
  border: none;
  padding: 10px 20px;
  background-color: #4F46E5;
  color: #FFFFFF;
}

Обратите внимание: два слоя работают вместе — первый (4px 6px размытие, -1px растяжение, 0.2 альфа) задаёт чёткий край контакта; второй (10px 15px размытие, -3px растяжение, 0.102 альфа) даёт амбиентный подъём. Снизьте альфу, и тень превратится в плоский чёрный штамп; поднимите растяжение, и кнопка покажется парящей слишком высоко.

Для состояния нажато очистите эти слои и добавьте один: Внутренняя включена, смещение 0/2, размытие 4, растяжение 0, цвет #00000033. Вывод станет inset 0 2px 4px rgba(0, 0, 0, 0.2) — элемент теперь выглядит вдавленным в поверхность, идеально для стиля :active.

FAQ#

Почему цвет выходит как rgba(...), хотя я ввёл HEX?#

Когда у вашего HEX есть альфа-канал (8 цифр, как #00000033), инструмент сериализует его как rgba(r, g, b, a), потому что именно эту форму надёжно парсят большинство CSS-инструментов и старых браузеров. Полностью непрозрачный цвет — без альфы или с альфой FF — остаётся компактным #RRGGBB. Оба рендерятся идентично тому, что вы настроили; речь исключительно о том, какая запись надёжнее ниже по потоку.

В каком порядке рисуются слои?#

Первый слой в списке рисуется сверху, последний — снизу. Для естественного возвышения ставьте первым резкий, тёмный, близкий слой, а вторым — мягкий, светлый, дальний: так плотный контактный край не задушен амбиентной заливкой. Переупорядочивайте через Поднять слой / Опустить слой, пока превью не станет правильным.

Размытие или растяжение — в чём разница?#

Размытие смягчает край тени (градиент от полного цвета к прозрачному). Растяжение увеличивает или уменьшает всю тень на фиксированную величину до применения размытия — положительное растяжение делает её больше и плотнее, отрицательное съедает и служит секретом плотного, профессионального края на слое с широким размытием. Частая ошибка — тянуться к одному размытию и получать пышное облако; добавление -2px или -3px растяжения возвращает форме чёткость.

Можно использовать эту тень на div, а не на кнопке?#

Да. CSS работает на любом элементе, принимающем box-shadow, — скопируйте только строку box-shadow: (или всё правило, переименованное в ваш селектор) и отбросьте специфичные для кнопки декларации, которые не нужны. Вывод HTML релевантен, только когда вам действительно нужен <button>.