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