Чем внутренняя тень отличается от обычной?

Внутренняя тень (Inset) рисуется внутри границ элемента, создавая эффект вдавленности, тогда как обычная тень отбрасывается наружу от элемента.

Генератор теней CSS (Box Shadow)

Генератор теней CSS позволяет визуально настраивать смещение, размытие, растяжение, цвет и прозрачность тени с живым превью, а также добавлять внутреннюю тень (Inset), после чего остаётся скопировать готовый код box-shadow.

Дизайн и CSS Полностью работает в вашем браузере

Вся обработка происходит на вашем устройстве — ничего не отправляется на сервер.

Смещение по горизонтали0pxСмещение по вертикали8pxРазмытие (Blur)20pxРастяжение (Spread)-2pxЦветНепрозрачность25%Внутренняя тень (Inset)

Код CSS

box-shadow: 0px 8px 20px -2px rgba(0, 0, 0, 0.25);

Часто задаваемые вопросы

Да, вы можете добавлять несколько слоёв теней (multiple box-shadow) и настраивать каждый слой отдельно — точно так же, как это позволяет само свойство CSS.