Інструмент для розробників

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

Перетягуйте повзунки й копіюйте CSS.

Генератор CSS box-shadow Працює на вашому пристрої

Працює у вашому браузері — ваш текст нікуди не надсилається
Без реєстрації та квот, безкоштовно користуйтеся скільки завгодно

Як це працює

Box-shadow приймає чотири числа й колір у певному порядку, і різниця між тінню, що читається як глибина, і тінню, що виглядає як наклейка, повністю в цих числах. Бачити зміну під час перетягування набагато швидше, ніж вгадувати.

Що означають чотири числа

По порядку: горизонтальне зміщення, вертикальне зміщення, радіус розмиття та розтягнення. Зміщення переміщують тінь; розмиття пом'якшує її край; розтягнення збільшує або зменшує її перед розмиттям. Від'ємне розтягнення втягує тінь, і так отримують щільну тінь під карткою, що не розтікається по боках.

Як зробити її реалістичною

Світло зазвичай падає зверху, тож невелике додатне вертикальне зміщення без горизонтального виглядає природно. Великі, дуже прозорі тіні читаються як м'яка глибина; малі, темні, різкі — як вирізана наклейка. Реальні предмети відкидають тіні, що розмиваються тим більше, чим далі вони від поверхні, — більше розмиття означає вищий елемент.

Внутрішні тіні

Внутрішня тінь малюється всередині елемента, а не ззовні, і саме так створюють натиснуті кнопки, поля введення та вдавлені панелі. Ті самі чотири числа застосовуються, лише спрямовані досередини.

Кілька тіней одночасно

CSS приймає список, розділений комами, і накладення двох — однієї щільної та темної, іншої широкої й блідої — виглядає значно краще за одну. Цей генератор створює одну; для багатошарового ефекту вставте дві разом самостійно.

Запитання й відповіді