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