Inner shadow (inset)
A shadow painted inside an element's edges instead of behind it, so the surface reads as pressed in, carved, or hollowed out.
See it
What it is
An inner shadow is the same offset-and-blur trick as a drop shadow, but painted inside the element's bounds. Instead of the shape floating above the surface, the surface looks like it has been pushed in. In CSS it is the 'inset' keyword on 'box-shadow'; in Figma and Photoshop it is the Inner Shadow layer style.
Use it wherever something should read as a well rather than a button: text inputs and search fields, progress and slider tracks, toggle grooves, pressed or active button states, and the recessed half of the neumorphism recipe. It is also the fastest way to sell letterpress or engraved type, where a 1px dark inner shadow at the top plus a 1px light shadow at the bottom makes the letters look stamped into the material.
Gotcha: the light has to stay consistent with everything else on the page. If your drop shadows fall downward (light from above), an inner shadow must be darkest along the top inner edge, and a matching light inset along the bottom edge is what actually sells the dent. Get that backwards and the element looks bulged instead of sunken. Also, inset shadows are clipped by 'border-radius' and sit above the background but below content, so they will not darken text or images inside the element.
Ask AI for it
Style these text inputs as recessed wells using inset shadows. Apply 'box-shadow: inset 0 2px 4px rgba(0,0,0,0.12), inset 0 1px 1px rgba(0,0,0,0.06)' so the darkest edge is along the top (light comes from above), plus a 1px light bottom highlight to complete the dent. Use a background slightly darker than the surrounding card, keep the border subtle, and on focus swap the top inset for a 2px accent ring without removing the inset entirely. Match the light direction to the drop shadows already used on cards.