Об этом инструменте
Свойство CSS box-shadow рисует одну или несколько теней вокруг рамки элемента. Каждая тень — это набор значений: необязательное ключевое слово inset, горизонтальное и вертикальное смещения, радиус размытия, радиус разброса и цвет. Несколько теней разделяются запятыми и отрисовываются сзади наперёд, поэтому первая в списке оказывается сверху. Наложение нескольких теней с низкой непрозрачностью — это способ построить реалистичное возвышение, мягкий рассеянный свет и внутренние свечения; одна тень редко выглядит естественно.
Используйте его, чтобы оформлять возвышение карточек и модальных окон, настраивать эффекты кольца фокуса и внутреннего свечения, воссоздавать глубину в стиле Material с помощью наложенных слоёв либо быстро прототипировать состояние наведения, прежде чем закрепить его в таблице стилей. Выберите предустановку для начала, отрегулируйте ползунки каждого слоя, включите inset для утопленных теней и вставьте сгенерированное правило прямо в ваш CSS или в произвольное значение Tailwind.
Цвета выводятся в виде rgba(), поэтому ползунок непрозрачности напрямую соответствует альфа-каналу — лежащий в основе hex остаётся нетронутым, что упрощает дальнейшую ручную настройку значения.
Часто задаваемые вопросы
Как создать многослойную (multi-layer) box-shadow?
Укажите несколько определений теней, разделённых запятыми, в одном объявлении box-shadow. Каждый слой отрисовывается независимо и складывается сзади наперёд, причём первая указанная тень рисуется сверху; сочетание нескольких слоёв с низкой непрозрачностью даёт более мягкую и реалистичную глубину, чем одна тень.
В чём разница между размытием и разбросом в box-shadow?
Размытие — это четвёртое значение, оно управляет мягкостью края тени: более высокие значения растушёвывают её сильнее. Разброс — это необязательное пятое значение, оно увеличивает (положительное) или уменьшает (отрицательное) размер тени до применения размытия, поэтому отрицательный разброс прижимает тень к элементу.
Что делает ключевое слово inset в box-shadow?
Добавление inset рисует тень внутри блока элемента, а не снаружи, создавая эффект утопления или внутреннего свечения. Без inset тень отрисовывается наружу как обычная отбрасываемая тень.