Как в input сделать объемным (внутреннюю тень)?

Frontend developer HTML / CSS
1

Пытаюсь сделать что бы тень была внутрь инпута и создавала бы ощущение вдавленности, углубленности, для этого нужно что бы тень падала внутрь, вопрос, как такое сделать? Я раньше делал только через обычный box-shadow обычные тени(

2

Для этого нужно дописать inset, тогда тень будет падать внутрь, по умолчанию вроде всегда внешняя)

     .inpt-form {

            box-shadow: inset 1px 1px 3px -1px rgba(0, 0, 0, 0.6);

        }



<input class="inpt-form" type="text" name="name" placeholder="Имя" />


<input class="inpt-form" type="text" name="surname" placeholder="Фамилия" />