Тінь для картки CSS — легкий код box-shadow
Візуальне створення коду CSS box-shadow: повзунки для зсуву, розмиття, розтягування, кольору з прозорістю, режиму всередину та до чотирьох шарів із живим попереднім переглядом.
Обробляється повністю у вашому браузері — те, що ви тут вводите, ніколи не вивантажується.
Результат
Про цей інструмент
Ця сторінка відкриває генератор box-shadow із попередньо встановленою класичною тінню для картки: 2px вниз, розмиття 8px, непрозорість чорного 15%. Вона навмисно непомітна — достатньо, щоб відокремити картку від сторінки, не привертаючи до себе уваги — і попередній перегляд показує, наскільки вона непомітна.
Цей діапазон відповідає найнижчим рівням піднесення в більшості дизайн-систем: картки списків, випадні меню, спливні підказки та рядки таблиць при наведенні. Якщо вам потрібен сильніший підйом для модальних вікон або плавучих панелей, збільште зсув по Y і розмиття разом — вони мають зростати пропорційно, щоб джерело світла виглядало правдоподібно.
Скопіюйте рядок box-shadow у стилі вашого компонента або продублюйте його як другий шар із меншим розмиттям, щоб додати чіткості краям. Інструмент безплатний і працює повністю у вашому браузері.