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