Створюйте тінь шар за шаром
Цей генератор box-shadow пише CSS-властивість <code>box-shadow</code> за вас. Додавайте стільки шарів тіні, скільки потрібно, налаштовуйте для кожного горизонтальне й вертикальне зміщення, розмиття, розтягування, колір і непрозорість, перемикайте шар у внутрішню тінь (inset) і дивіться, як блок попереднього перегляду оновлюється на будь-якому фоні. Почніть із пресетів м'яких тіней, рівнів у стилі Material, неоморфізму, жорстких зміщень і світіння, а потім скопіюйте CSS або клас Tailwind <code>shadow-[…]</code>. Вставте наявну тінь, щоб її відредагувати. Усе працює у вашому браузері.
Як створити CSS box-shadow
- 1Виберіть пресет, близький до потрібного, або залиште типову багатошарову тінь.
- 2Виберіть шар і задайте зміщення X та Y, розмиття, розтягування, колір і непрозорість. Увімкніть Inset, щоб малювати тінь усередині блока.
- 3Використовуйте Додати шар, дублюйте, змінюйте порядок і приховуйте шари, щоб поєднати кілька тіней.
- 4Змініть фон перегляду, колір блока, радіус кутів і розмір відповідно до вашого дизайну.
- 5Скопіюйте CSS або клас Tailwind.
Значення box-shadow простими словами
- Зміщення X і Y
- Наскільки тінь зсунута вправо й униз. Від'ємні значення зсувають її вліво й угору. Джерело світла над сторінкою означає додатне зміщення Y.
- Радіус розмиття
- Наскільки м'який край. 0 дає чітку копію блока; більші значення розподіляють тінь на ширшу й блідішу область. Від'ємним він бути не може.
- Радіус розтягування
- Збільшує або зменшує тінь перед розмиттям. Від'ємне розтягування з великим розмиттям не дає м'якій тіні визирати з боків — це і є секрет більшості «м'яких» тіней.
- Колір
- Зазвичай чорний або темний відтінок фону з низькою непрозорістю. Тінь, підфарбована кольором фону, виглядає природніше за чисто сіру.
- inset
- Малює тінь усередині рамки замість зовні, тож блок здається втиснутим. Внутрішні й зовнішні тіні можна поєднувати в одному оголошенні.
Навіщо накладати кілька тіней?
Справжні тіні мають темне щільне ядро там, де об'єкт майже торкається поверхні, і м'яку широку півтінь далі. Один шар box-shadow може намалювати лише щось одне з цього. Два–п'ять шарів, у яких зміщення й розмиття щоразу подвоюються, кожен із низькою непрозорістю, дають ту плавну реалістичну глибину, яку використовують сучасні дизайн-системи. Саме так влаштовано пресет Плавна багатошарова.
Шари малюються спереду назад: перший у списку лежить зверху. Змінюйте порядок кнопками зі стрілками й приховуйте шар іконкою ока, щоб побачити, що він додає. Приховані шари не потрапляють у скопійований CSS.
Рівні, неоморфізм та інші стилі
Пресети Рівень 1–5 повторюють класичні тіні карток Material Design: кожен рівень поєднує розсіяну тінь із основною й піднімає картку вище над сторінкою.
Неоморфізм використовує дві тіні на блоці того самого кольору, що й фон: темну, зсунуту вниз і вправо, і світлу, зсунуту вгору й уліво. Це працює лише тоді, коли кольори блока й фону збігаються, тому пресет задає обидва. Жорстке зміщення повністю прибирає розмиття для плаского бруталістського вигляду, а Світіння використовує нульове зміщення й кольорову тінь для кілець фокуса та неонових ефектів на темному фоні.
Box-shadow у Tailwind CSS
Вбудовані класи Tailwind від shadow-sm до shadow-2xl покривають типові випадки. Для всього іншого генератор пише довільне значення, як-от shadow-[0_10px_30px_-5px_rgba(0,0,0,0.15)]: пробіли замінюються підкресленнями, бо в назвах класів не може бути пробілів, і клас працює в Tailwind 3 і 4 без змін у конфігурації.
Поєднайте тінь із фоном із генератора CSS-градієнтів або перевірте, чи текст на картці лишається читабельним, за допомогою перевірки контрасту.
Тіні та продуктивність
Великі радіуси розмиття в усіх сучасних браузерах малює GPU, і на статичних елементах вони майже нічого не коштують. А от анімація box-shadow перемальовує елемент у кожному кадрі; щоб анімувати глибину при наведенні, винесіть більшу тінь у псевдоелемент і анімуйте його opacity.
Поширені запитання
- Який синтаксис у box-shadow?
- box-shadow: [inset] offset-x offset-y [blur] [spread] колір;. Обов'язкові лише два зміщення. Кілька тіней розділяються комами, наприклад box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 4px 8px rgba(0,0,0,.1);.
- Як зробити м'яку, ледь помітну тінь?
- Використайте чорний із низькою непрозорістю (10–20 %), велике розмиття, невелике зміщення Y і від'ємне розтягування, наприклад 0 10px 30px -5px rgba(0,0,0,0.15). Два-три такі шари виглядають ще плавніше.
- Як додати тінь лише з одного боку?
- Зсуньте тінь у цей бік і задайте від'ємне розтягування приблизно рівне розмиттю, щоб вона не з'являлася з інших боків, наприклад 0 8px 6px -6px rgba(0,0,0,0.3) для тіні лише знизу.
- Що робить inset?
- inset малює тінь усередині блока, а не за ним, і елемент виглядає втиснутим у сторінку. Це часто використовують для полів введення й натиснутих кнопок.
- Чим box-shadow відрізняється від drop-shadow?
- box-shadow повторює рамку елемента та її радіус. Функція filter: drop-shadow() повторює реально видимі пікселі, як-от контур прозорого PNG чи SVG-іконки, але не має ні розтягування, ні inset.
- Як використати власну тінь у Tailwind?
- Скопіюйте клас Tailwind із генератора — довільне значення на кшталт shadow-[0_4px_12px_rgba(0,0,0,0.15)] — і додайте його до елемента. Також можна покласти CSS-значення в налаштування boxShadow вашої теми, щоб дати йому назву.
- Чи можна відредагувати наявну тінь?
- Так. Вставте значення box-shadow, повне оголошення або клас Tailwind shadow-[…] у поле «Імпорт». Довжини в rem і em перераховуються з розрахунку 16px.
- Чи надсилається мій CSS кудись?
- Ні. Генератор повністю працює у вашому браузері.