Генератор box-shadow
Складайте багатошарові тіні з живим переглядом — м'яке підняття, чіткі зсуви, внутрішні тіні й готові пресети.
Як працює генератор box-shadow
Створюйте багатошарові CSS-тіні з налаштуваннями для кожного шару й живим переглядом, а потім копіюйте готовий до продакшну CSS.
Багатошарові тіні
Справжня глибина рідко складається з однієї тіні. Накладайте до шести шарів — щільну контактну тінь і ширші розсіяні, — щоб глибина виглядала природно, а не брудно.
Повний контроль
Кожен шар має зсув X/Y, розмиття, розтягування, колір і непрозорість, а також перемикач для внутрішньої тіні. Живий перегляд оновлюється, поки ви тягнете повзунки.
Перегляд на світлому й темному фоні
На темних поверхнях тіні сприймаються інакше. Перемкніть фон перегляду, щоб перевірити обидві теми перед релізом.
Пресети для старту
Пресети «М'яка», «Багатошарова», «Чітка», «Висока» й «Внутрішня» дають добру відправну точку — доналаштуйте тінь і скопіюйте фінальний CSS в один клік.
Часті запитання
offset-x offset-y blur spread. Зсуви переміщують тінь, blur розмиває її край, а spread збільшує чи зменшує тінь до розмиття. Завершує значення колір (бажано з альфа-каналом).
Одне велике розмиття виглядає пласким і сірим. Поєднання малої чіткої тіні (контактної), середньої (від основного світла) і великої м'якої (розсіяної) імітує справжнє освітлення й зберігає краї чіткими.
inset малює тінь усередині елемента — так роблять натиснуті кнопки, заглиблені поля введення й темну половину неоморфних поверхонь.
Анімація box-shadow перемальовує кожен кадр. Для плавного підняття при наведенні краще анімуйте opacity псевдоелемента, який уже має потрібну тінь.