CSS inset shadow depth effect
The `inset` keyword in `box-shadow` flips the direction of the offset-x and offset-y: instead of projecting outward from the element, the shadow starts inside it, hugging the inner edge. It is the basis of pressed states on buttons, sunken input fields, neumorphism, and any effect where the element should look like it sits below the screen surface instead of floating above it.
Pairs with `transform: translateY(1px)` for a complete press effect.
Inner for depth + outer for accessibility focus ring.
A dark shadow on the corner that receives less light and a light shadow on the opposite corner. Flipping both produces the raised version of the same element.
Yes. CSS allows as many layers as needed, separated by commas. Each layer has its own offset, blur, spread and color parameters, enabling much richer effects than a single shadow.
Yes. CSS applies both to the same element without issue. It is common to have an inset for inner depth and an outer for a focus ring or elevation simultaneously.
Neumorphism has serious accessibility issues because the low contrast between elements makes it difficult for users with low vision to identify interactive elements. Prefer applying it only to secondary or decorative elements.
No. Unlike `border`, which adds its thickness to the element's width and height unless `box-sizing: border-box` is active, `box-shadow: inset` is purely visual and never shifts layout, even with large blur or spread values.
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.25);CSS is generated locally in your browser.